How to test stories from Storybook in Svelte with Vitest

Question

For unit-testing Storybook's component stories with React there is the composeStory function from the @testing-library/react module (docs).

How can this be done in Svelte?

Answer 1

I made it work in the following way:

import {test, expect} from 'vitest';
import Meta, {Default, WithInteractions} from './Component.stories';
import {render, waitFor} from '@testing-library/svelte';

test('Can test stories', async () => {
  const {container} = render(Meta.component, {...Meta.args, ...Default.args});
  await waitFor(() => {
    expect([...container.querySelectorAll('label.title')]
      .map((node) => node.getAttribute('aria-label'))).toEqual([
        'Something',
        'Something more',
        'Something else',
        'Something again',
      ]);
  });
});

test('With interactions', async () => {
  const {container} = render(Meta.component, WithInteractions.args);
  await WithInteractions.play({canvasElement: container});
  await waitFor(() => {
    expect(container.querySelector('.TASK_PINNED #pinTask-1')).toBeVisible();
    expect(container.querySelector('.TASK_PINNED #pinTask-3')).toBeVisible();
    expect(container.querySelector('.TASK_INBOX #pinTask-2')).toBeVisible();
    expect(container.querySelector('.TASK_INBOX #pinTask-4')).toBeVisible();
  });
});