Inline Svelte components for tests

[sureshjoshi]

Describe the problem

I'll start off by saying I don't know whether this would be a Svelte feature, or maybe part of a Vite plugin, or even if this should be in another library.

When I'm writing component tests using something like testing-library, I'll need to write some code like this (which requires jumping from file to file):

import {render} from '@testing-library/svelte'
import MyComponent from './MyComponent.svelte'

const result = render(MyComponent, componentOptions, renderOptions)

This leaves me jealous of frameworks like React where you can inline JSX and see a lot more of your component code (all of it, if you really wanted to):

import {render, screen} from '@testing-library/react'
import Fetch from './fetch'

test('loads and displays greeting', async () => {
  render(<Fetch url="/greeting" />)

I'm attempting to port Tailwind's HeadlessUI-React library to Svelte 5, and in the process of porting, there are hundreds (thousands?) of inline JSX examples to test components in different ways, eg:

https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/switch/switch.test.tsx

it('should be possible to render an (on) Switch using a render prop', () => {
  render(
    <Switch checked={true} onChange={console.log}>
      {({ checked }) => <span>{checked ? 'On' : 'Off'}</span>}
    </Switch>
  )
  ...

Writing a custom Svelte file per test would be annoying, but moreso, just trying to debug that becomes a nightmare very quickly (I know, I've tried).

Describe the proposed solution

I have a partial solution that I'm kinda meh about, but think this might be a better first-party plugin or solution. Or maybe I can directly use the compiler or createRawSnippet to facilitate this, but I honestly am not sure about any of that.

Using a hacked together Vite plugin, I - on-the-fly - compile Svelte template strings into virtual modules, and async import them into my test methods.

https://github.com/RobotPajamas/headlessui-svelte/blob/main/src/lib/switch/switch.dom.test.ts

it("should be possible to use in an uncontrolled way", async () => {
    let handleSubmission = vi.fn();

    const component = await sveltify(`
      <script>
        import Switch from "$lib/switch/Switch.svelte";
        let { handleSubmission } = $props();
      </script>
      <form
        onsubmit={(e) => {
          e.preventDefault();
          handleSubmission(Object.fromEntries(new FormData(e.target)));
        }}
      >
        <Switch name="notifications" />
        <button id="submit">submit</button>
      </form>
    `);
    render(component, { handleSubmission });

The plugin is here, just a couple dozen lines of code - cobbled together from other similar plugins I'd seen in the past (and some guesswork) when this library was originally intended for Svelte 3 or 4: https://github.com/RobotPajamas/headlessui-svelte/blob/24ef0380838e50241add1a86dc6aaaad89a8d21b/vite.config.ts#L27-L94

Some things I currently run into (without having spent much time to look into them, as this is "good enough" when compared against my overall goal):

• Hot-reload isn't working when you change string component content, need to re-run tests from scratch
• No type safety, until you run tests and see what fails
• All imports must be explicit, but it would be nice to ambiently import Switch just once in the test file to reduce total lines of code (e.g. 35 lines of import Switch in that one test file)
• Need to ensure my tests are all asynchronous in order to import the virtual component
• Requires type hinting via types.d.ts or a do-nothing function in the file to satisfy the type checker (function sveltify(input: string): Promise<typeof SvelteComponent>)

The feature idea would be some way to "natively" (or "pluginly") have a similar result as above. In my ideal world, it wouldn't be a bag of strings without type checking, but something ... else... that someone smarter than me can come up with 😄

Importance

nice to have

[Thiagolino8]

One solution might be to write the tests in the script module

[paoloricciuti]

One solution might be to write the tests in the script module

I absolutely love this idea 😍

[sureshjoshi]

One solution might be to write the tests in the script module

I'm not sure I'm grokking what you're putting down. Let's say my Switch.svelte component has 30 tests in a variety of configurations (switch.test.ts), where would I now put the tests?

[paoloricciuti]

One solution might be to write the tests in the script module

I'm not sure I'm grokking what you're putting down. Let's say my Switch.svelte component has 30 tests in a variety of configurations (switch.test.ts), where would I now put the tests?

At least from what I understood it should be switch.test.svelte.

You render the component in normally and test it from the module

[sureshjoshi]

test it from the module

This is the part that's confusing me.

I'd have a single switch.test.svelte and then 30 or so variants of this in the single <script module> Or would each of the tests occupy it's own <script module> in the same test.svelte file?

<script>
  import Switch from "$lib/switch/Switch.svelte";
  let { handleSubmission } = $props();
</script>
<form
  onsubmit={(e) => {
    e.preventDefault();
    handleSubmission(Object.fromEntries(new FormData(e.target)));
  }}
>
  <Switch name="notifications" />
  <button id="submit">submit</button>
</form>

[dummdidumm]

There's https://github.com/DockYard/svelte-inline-component, but no idea if it still works.

So yeah, you could solve this with a Vite plugin, which I feel like is probably the best course of action.

[gossi]

I'm having a very similar story.

I'm an ember dev, made a framework agnostic library and wrote the integration for ember. Now trying to transport it to svelte. The problem in adopting svelte is the missing test setup. It improved from an FAQ article to a its own page but its basically mentioning third-party tools. I tried them in particular vitest-browser-svelte (because not testing in a real browser is not an option to me, ember teached me very well). I learned that authors for the testing frameworks also rely on what svelte provides them and can only do so much, read the full story over here: vitest-dev/vitest-browser-svelte#1

As an ember dev, I'm insanely satisfied with the test setup they provide. It's the same authoring format for app and testing code. So I'm here to promote the same situation for svelte devs 🥳

1) Comparison with Ember

Let's see how that is for ember at first (sorta to have a benchmark).

1.A) App Code

Start with a <List> component (notice the provided <l.Option> component, which is most similar to a snippet in svelte):

<template>
  <List as |l|>
    {{#each items as |item|}}
      <l.Option @value={{item.id}}>{{item.name}}</l.Option>
    {{/each}}
  </List>
</template>

1.B) Testing Code

and the test code to it:

test('renders items', async function (assert) {
  await render(
    <template>
      <List as |l|>
        {{#each items as |item|}}
          <l.Option @value={{item.id}}>{{item.name}}</l.Option>
        {{/each}}
      </List>
    </template>
  );

  const input = new ListPageObject();

  assert.dom(input.$option[0]).hasText('Banana');
  assert.dom(input.$option[1]).hasText('Apple');
  assert.dom(input.$option[2]).hasText('Pear');
});

1.C) Testing Directives

you'll notice the authoring format within <template> is the same for app and testing code. Even better it doesn't even have to be a component that is a <template>. Smaller directives (in ember these are modifiers and helpers; the svelte equivalent are use: or animate:).

Here I'm testing the modifier that makes the above <List> work:

test('tabindex attribute is set', async function (assert) {
  const options = ['apple', 'banana', 'pineapple'];

  await render(
    <template>
      <div role="listbox" {{ariaListbox items=options}}>
        {{#each options as |option|}}
          <p role="option" aria-selected="false">{{option}}</p>
        {{/each}}
      </div>
    </template>
  );

  assert.dom('[role="listbox"]').hasAttribute('tabindex', '0');
});

PS. that's the one, I'm transporting over to svelte (that lead me here).

2) Svelte's Situation

Svelte can't provide what is possible in ember today. It can do the first one under certain constraints, the second sample is nuts and the third one is not possible today (to my knowledge).

Basically the svelte testing story is: Components! (and that's it). So you must wrap code in a component in order to test it :(

2.A) Testing Code

Testing a component:

import List from '../components/List.svelte';

test('tabindex is set', () => {
  const screen = render(List, {
    items: ['Banana', 'Apple', 'Pear']
  });

  const element = screen.getByRole('listbox');
  const list = element.element() as HTMLElement;

  expect(list).toHaveAttribute('tabindex', '0');
});

2.B) Testing Snippet

Testing a snippet (no authoring of "HTML" available). It is basically writing the code that comes out of the compiler. Don't ever do that!

import List from '../components/List.svelte';

const item: Snippet<[unknown]> = ($$anchor: never, option = $.noop) => {
  $.next();

  let text = $.text();

  $.template_effect(() => $.set_text(text, option()));
  $.append($$anchor, text);
};

test('first item', async () => {
  const screen = render(List, {
    items: ['Banana', 'Apple', 'Pear'],
    item,
    $$slots: { item: true }
  });

  await expect.element(screen.getByRole('option').first()).toHaveAccessibleName('Banana');
  await expect.element(screen.getByRole('listbox')).toBeEnabled();
});

I did that for research reasons

2.C) Testing Directives

nope.

3) Suggestions for Svelte

Similar to Ember I'm proposing the same authoring format for app and testing code, one that does not only helps in testing components but templates in general.

An idea of how that could look:

test('first item', async () => {
  const options = $state(['Banana', 'Apple', 'Pear']);

  const screen = render(
    <svelte>
      <List items={options}>
        {#snippet item(option)}
          <span>{option}</span>
        {/snippet}
      <List>
    </svelte>
  });

  await expect.element(screen.getByRole('option').first()).toHaveAccessibleName('Banana');
  await expect.element(screen.getByRole('listbox')).toBeEnabled();
});

or testing directives directly without the need to wrap them in components:

test('first item', async () => {
  const options = $state(['Banana', 'Apple', 'Pear']);

  const screen = render(
    <svelte>
      <div
        role="listbox"
        tabindex="0"
        use:ariaListbox={{
          items: options
        }}
      >
        {#each items as option}
          <span role="option" aria-selected={isSelected(option) ? 'true' : 'false'}>
            <span>{option}</span>
          </span>
        {/each}
      </div>
    </svelte>
  });

  await expect.element(screen.getByRole('option').first()).toHaveAccessibleName('Banana');
  await expect.element(screen.getByRole('listbox')).toBeEnabled();
});

I used <svelte> here as delimiter as ember uses <template>, that's merely helping with syntax highlighting then.

PS. For ember, there is a lenghty article series backing up its design speaking about testability: https://v5.chriskrycho.com/journal/ember-template-imports/

Hope to see this coming to svelte 😊

[NullVoxPopuli]

Svelte is welcome to use gjs/gts <3