Skip to content

0.2 Writing Tests.mdx

Latest commit

 

History

History
85 lines (58 loc) · 3.41 KB

0.2 Writing Tests.mdx

File metadata and controls

85 lines (58 loc) · 3.41 KB
Raw

Writing Tests with Storybook Test Runner

Storybook Test Runner is a powerful tool that allows you to write and execute tests directly within your Storybook stories. This approach provides a seamless integration between your component documentation and testing, ensuring that your components behave as expected in various scenarios. Below, we'll explore how to write tests using the Storybook Test Runner, using the TextField component as a guide.

Writing Tests

Define Your Component and Story

Create a Storybook story for your component. For example, the TextField component:

import type { Meta, StoryObj } from '@storybook/react';
import { TextField } from './TextField';

const meta: Meta<typeof TextField> = {
  component: TextField,
  args: {
    label: 'Username',
    placeholder: 'Enter your username',
  },
};

export default meta;

type Story = StoryObj<typeof TextField>;

export const Tests: Story = {};

Write Test Scenarios

Define test scenarios as functions that interact with the component using @storybook/test and @testing-library/dom. These functions simulate user interactions and assert expected outcomes.

Example:

import { expect } from '@storybook/jest';
import { userEvent } from '@storybook/testing-library';
import type { StoryContext } from '@storybook/react';

const testValidSubmission = async ({ canvas }: StoryContext) => {
  const input = canvas.getByLabelText('Username');
  await userEvent.type(input, 'validuser');
  await userEvent.tab();
  expect(input).toHaveValue('validuser');
  expect(canvas.queryByText('Username is required')).not.toBeInTheDocument();
};

const testInvalidSubmission = async ({ canvas }: StoryContext) => {
  const input = canvas.getByLabelText('Username');
  await userEvent.type(input, 'a');
  await userEvent.tab();
  expect(canvas.getByText('Username must be at least 3 characters')).toBeInTheDocument();
};

Integrate Tests into Stories

Use the play function in your Storybook story to execute the test scenarios. This function runs after the story renders, allowing you to interact with the component and verify its behavior.

Example:

export const Tests: Story = {
  play: async (storyContext) => {
    await testValidSubmission(storyContext);
    await testInvalidSubmission(storyContext);
  },
};

Testing Philosophy

  1. Component Behavior: Focus on testing the behavior of your component in isolation. Ensure that it handles user interactions, displays the correct UI, and manages state as expected.

  2. User-Centric Scenarios: Write tests that mimic real user interactions. This includes filling out forms, clicking buttons, and verifying that the UI responds correctly.

  3. Edge Cases and Validation: Test edge cases and validation logic to ensure your component handles invalid input gracefully and provides meaningful feedback to users.

  4. Integration with Backend: If your component interacts with a backend (e.g., form submission), simulate these interactions and verify that the component handles responses correctly.

  5. Maintainability: Write clear and concise tests that are easy to understand and maintain. Use descriptive function names and comments to explain the purpose of each test.

By following these guidelines, you can leverage Storybook Test Runner to create comprehensive and reliable tests for your components, ensuring they meet both functional and user experience requirements.