Creating Interactive Tests in Storybook and Reusing Them in Jest/Vitest

---

Introduction

Interactive tests in Storybook allow you to simulate user interactions and verify component behavior. By reusing these tests in Jest or Vitest, you can ensure consistency across your testing environments. This guide will walk you through setting up interactive tests in Storybook and reusing them in Jest or Vitest.

Prerequisites

Before we start, make sure you have the following installed:

• Node.js

• Storybook

• Jest or Vitest

You can install the necessary packages using npm:

npm install @storybook/addon-interactions @storybook/testing-library @storybook/test-runner jest vitest

Step-by-Step Guide

1. Setting Up Your Project

Create a new directory for your project and initialize it:

mkdir storybook-interactive-tests
cd storybook-interactive-tests
npm init -y

2. Installing Dependencies

Install Storybook, Jest, and Vitest:

npx sb init
npm install @storybook/addon-interactions @storybook/testing-library @storybook/test-runner jest vitest

3. Creating a Storybook Story

Create a Storybook story for your component. For this example, let’s assume you have a Button component.

// Button.stories.jsx
import React from 'react';
import { Button } from './Button';
import { within, userEvent } from '@storybook/testing-library';
import { expect } from '@storybook/jest';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Button',
};

// Interactive test
Primary.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const button = canvas.getByRole('button');
  await userEvent.click(button);
  expect(button).toHaveTextContent('Button');
};

4. Reusing the Play Function in Jest/Vitest

You can reuse the play function from your Storybook story in your Jest or Vitest tests. This ensures that the same interactions are tested in both environments.

Using Jest

// Button.test.jsx
import { render } from '@testing-library/react';
import { Primary } from './Button.stories';

test('Primary button', async () => {
  const { container } = render(<Primary {...Primary.args} />);
  await Primary.play({ canvasElement: container });
});

Using Vitest

// Button.test.jsx
import { render } from '@testing-library/react';
import { Primary } from './Button.stories';
import { it } from 'vitest';

it('Primary button', async () => {
  const { container } = render(<Primary {...Primary.args} />);
  await Primary.play({ canvasElement: container });
});

5. Running Your Tests

Run your tests using the appropriate test runner.

Jest

npx jest

Vitest

npx vitest

Explanation

1. Storybook Story: We define a Storybook story for the Button component and add an interactive test using the play function.

2. Reusing Play Function: In the Jest or Vitest test file, we import the Storybook story and reuse the play function to ensure the same interactions are tested.

3. Running Tests: Execute the tests using Jest or Vitest to verify the interactions.

Conclusion

By creating interactive tests in Storybook and reusing them in Jest or Vitest, you can ensure consistent and reliable component behavior across different testing environments. This approach saves time and effort while maintaining high-quality standards for your components. Happy testing!

---