My learning diary

Reuse Stories When Testing

My volunteering experience at an open source project led me to appreciate Storybook. Developing frontend components in isolation makes me happy. Unexpected behaviour is localised, and you are appropriately enticed to write your components better. By better, I meant modular. Modularity encourages simplicity (think SRP), and this makes code more reusable and self-documenting. There’s no greater joy than not having to explain your code.

But wait, there’s more: If you think writing stories is exclusive to your Storybook instance and thus a pain to write, think again. You can reuse them when testing. I don’t know how I imagined this back then when I had a superficial understanding of Storybook, but I thought it might work. And it does.

This Medium article is the guide for reusing stories in tests. The “Why Storybook?” did mention this possibility briefly, but for the concrete steps, watch the video in it.

Since I typically use TypeScript, I had to refer to this blog post. And combined with what we learnt above, we get:

// YourComponent.stories.tsx
// Adapted from https://storybook.js.org/blog/writing-stories-in-typescript/
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

export default {
    component: YourComponent,
} as ComponentMeta<typeof YourComponent>;

const Template: ComponentStory<typeof YourComponent> = (args) => (
    <YourComponent {...args} />
);

export const Default = Template.bind({});
Default.args = {
    someArg: 123,
};

// YourComponent.test.tsx
// expect comes from Jest
import React from 'react';
import { render, screen } from '@testing-library/react';
import { Default } from './YourComponent.stories';

describe('YourComponent unit tests', () => {
    test('Default test case', () => {
        render(<Default {...Default.args} />);
        expect(screen.getByText('Some text that should appear in YourComponent')).toBeDefined();
        ...
    });

    ...
});

Relevant posts