Skip to content

Unit Testing Stories

1. React Testing Library imports

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';

2. Storybook imports

  • instead of importing the component
  • re-use the stories
    • just JS
    • where the component is already setup and has props
// composeStories will add the decorators in your stories, optional
import { composeStories } from '@storybook/testing-react';
import * as stories from '@src/stories/EarningsCell.stories';

// wrap the stories with the decorators defined in the story
const { ButtonWithoutName, ButtonWithName } = composeStories(stories);

3. Regular React Testing Library!

const earnerCell = render(<ButtonWithoutName {...DefaultEarningsCell.args} />);
const infoIcon = earnerCell.getByTest('test-id');
userEvent.hover(infoIcon);
const infoPopover = screen.getByTestId('button-popover');
expect(infoPopover).toHaveTextContent('Some text');

Last update: 2022-09-23