⚠️ IMPORTANT NOTE:

Hey there! I wanted to thank you for using @storybook/testing-vue3!

@storybook/testing-vue3 has been promoted to a first-class Storybook functionality in Storybook 8. This means that you no longer need this package, and this package will not be worked on anymore. Instead, you can import the same utilities, but from the @storybook/vue3 package.

Please do the following:

• Upgrade to Storybook 8 if you haven't already
• Uninstall @storybook/testing-vue3
• Update your imports from @storybook/testing-vue3 to @storybook/vue3

// Component.test.js
- import { composeStories } from '@storybook/testing-vue3';
+ import { composeStories } from '@storybook/vue3';

// setup-files.js
- import { setProjectAnnotations } from '@storybook/testing-vue3';
+ import { setProjectAnnotations } from '@storybook/vue3';

Please, if even after migrating, you are still experiencing issues, report them in the Storybook monorepo.

Thank you so much for this journey!

---

⚠️ This library is for Vue 3 projects. If you're using Storybook with Vue 2, please check @storybook/testing-vue instead!

Installation

This library should be installed as one of your project's devDependencies:

via npm

npm install --save-dev @storybook/testing-vue3

or via yarn

yarn add --dev @storybook/testing-vue3

Setup

Storybook CSF

This library requires you to be using Storybook's Component Story Format (CSF) and hoisted CSF annotations, which is the recommended way to write stories since Storybook 7.

Essentially, if your stories look similar to this, you're good to go!

// CSF: default export (meta) + named exports (stories)
export default {
  title: 'Example/Button',
  component: Button,
};

export const Primary = {
  template: '<Button v-bind="args" />',
};

Global config

This is an optional step. If you don't have global decorators, there's no need to do this. However, if you do, this is a necessary step for your global decorators to be applied.

If you have global decorators/parameters/etc and want them applied to your stories when testing them, you first need to set this up. You can do this by adding to or creating a jest setup file:

// setupFile.js <-- this will run before the tests in jest.
import { setProjectAnnotations } from '@storybook/testing-vue3';
import * as globalStorybookConfig from './.storybook/preview'; // path of your preview.js file

setProjectAnnotations(globalStorybookConfig);

For the setup file to be picked up, you need to pass it as an option to jest in your test command:

// package.json
{
  "test": "jest --setupFiles ./setupFile.js"
}

Usage

composeStories

composeStories will process all stories from the component you specify, compose args/decorators in all of them and return an object containing the composed stories.

If you use the composed story (e.g. PrimaryButton), the component will render with the args that are passed in the story. However, you are free to pass any props on top of the component, and those props will override the default values passed in the story's args.

import { render, screen } from '@testing-library/vue';
import { composeStories } from '@storybook/testing-vue3';
import * as stories from './Button.stories'; // import all stories from the stories file

// Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level.
const { Primary, Secondary } = composeStories(stories);

test('renders primary button with default args', () => {
  render(Primary());
  const buttonElement = screen.getByText(
    /Text coming from args in stories file!/i
  );
  expect(buttonElement).not.toBeNull();
});

test('renders primary button with overriden props', () => {
  render(Secondary({ label: 'Hello world' })); // you can override props and they will get merged with values from the Story's args
  const buttonElement = screen.getByText(/Hello world/i);
  expect(buttonElement).not.toBeNull();
});

composeStory

You can use composeStory if you wish to apply it for a single story rather than all of your stories. You need to pass the meta (default export) as well.

import { render, screen } from '@testing-library/vue';
import { composeStory } from '@storybook/testing-vue3';
import Meta, { Primary as PrimaryStory } from './Button.stories';

// Returns a component that already contain all decorators from story level, meta level and global level.
const Primary = composeStory(PrimaryStory, Meta);

test('onclick handler is called', async () => {
  const onClickSpy = jest.fn();
  render(Primary({ onClick: onClickSpy }));
  const buttonElement = screen.getByRole('button');
  buttonElement.click();
  expect(onClickSpy).toHaveBeenCalled();
});

License

MIT