bermudalocket/svelte-inline-component

Utility and vite plugin to allow to create your own inline svelte components in tests

svelte-inline-components

This repo contains two packages that are designed to work together.

• svelte-inline-component provides a runtime tagged template helper to define your inline components in your svelte tests.
• vite-plugin-svelte-inline-component is a vite plugin that allows to import the inline components defined with the above utility.

Used in conjunction with Vitest, it makes for a far better experience testing sveltekit apps as you can test things that were previously impossible or impractical, like components that take blocks or several components that interact with each other, at once.

Installation and configuration

Assuming you have Vitest already configured, you first have to install the package with:

npm i -D svelte-inline-components

The in your vitest.config.js import the vite plugin from vite-plugin-svelte-inline-component and add it the list of plugins:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { sveltekitViteConfig } from './svelte.config.js'
import path from 'path';
import svelteInlineComponent from 'vite-plugin-svelte-inline-component';

export default defineConfig({
  ...sveltekitViteConfig,
  plugins: [
    svelte({ hot: !process.env.VITEST, }),
    svelteInlineComponent(), // <------ here
  ],
  test: {
    global: true,
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      $lib: path.resolve('./src/lib'),
    },
  },
});

You're good to go.

Usage in tests

Now in your tests instead of importing a component and rendering it with render(MyButton, { props: { title: 'foo' } }) you can import the svelte tagged template and use components as you would in your real app (note that the test's function must be async).

import { cleanup, render } from '@testing-library/svelte'
import svelte from 'svelte-inline-components';

describe('MyComponent.svelte', () => {
  // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
  afterEach(() => cleanup())

  it('renders a link with the given href', async () => {
    const { getByTestId } = render(await svelte`
      <script>import MyButton from '$lib/MyButton.svelte';</script>
      <MyButton title="foo">
        Look ma! I'm using slots!!
      </MyButton>
    `);
    expect(getByTestId('button')).to.have.class('submit');
    expect(getByTestId('button')).to.have.text("Look ma! I'm using slots!!");
  });
});