Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
This version adds support for the includeStories and excludeStories parameter to filter non-story exports (#64)
:tada: This release contains work from new contributors! :tada:
Thanks for all your work!
:heart: Tom Coleman (@tmeasday)
:heart: @jonniebigodes
Updates Storybook peer dependency to 6.4
Storybook 6.4 released a new version of CSF, where the story can also be an object. This is supported in @storybook/testing-react, but you have to match the requisites:
1 - Either your story has a render method or your meta contains a component property:
// Example 1: Meta with component property
export default {
title: 'Button',
component: Button // <-- This is strictly necessary
}
// Example 2: Story with render method:
export const Primary = {
render: (args) => <Button {...args}>
}
Storybook 6.4 also brings a new function called play, where you can write automated interactions to the story.
In @storybook/testing-react, the play function does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.
Consider the following example:
export const InputFieldFilled: Story<InputFieldProps> = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByRole('textbox'), 'Hello world!');
},
};
You can use the play function like this:
const { InputFieldFilled } = composeStories(stories);
test('renders with play function', async () => {
const { container } = render(<InputFieldFilled />);
// pass container as canvasElement and play an interaction that fills the input
await InputFieldFilled.play({ canvasElement: container });
const input = screen.getByRole('textbox') as HTMLInputElement;
expect(input.value).toEqual('Hello world!');
});
Storybook released a new version of CSF, where the story can also be an object. This is supported in @storybook/testing-react, but you have to match the requisites:
1 - Either your story has a render method or your meta contains a component property:
// Example 1: Meta with component property
export default {
title: 'Button',
component: Button // <-- This is strictly necessary
}
// Example 2: Story with render method:
export const Primary = {
render: (args) => <Button {...args}>
}
2 - For typescript users, you need to be using Storybook 6.4 or higher.
CSF3 also brings a new function called play, where you can write automated interactions to the story.
In @storybook/testing-react, the play function does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.
Consider the following example:
export const InputFieldFilled: Story<InputFieldProps> = {
play: async () => {
await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
},
};
You can use the play function like this:
const { InputFieldFilled } = composeStories(stories);
test('renders with play function', async () => {
render(<InputFieldFilled />);
// play an interaction that fills the input
await InputFieldFilled.play!();
const input = screen.getByRole('textbox') as HTMLInputElement;
expect(input.value).toEqual('Hello world!');
});
:tada: This release contains work from a new contributor! :tada:
Thank you, null@payapula, for all your work!
CSF3 support was added in a previous version, however conflicted with projects using Storybook 6.3. The correct typescript types come from Storybook 6.4, rendering this library incompatible with projects using Storybook 6.3.
This release reverts the CSF3 support, which will be brought to the next major release of @storybook/testing-react.
Storybook released CSF3, where the story can also be an object. This is now supported in @storybook/testing-react. CSF3 also brings a new function called play, where you can write automated interactions to the story.
In @storybook/testing-react, the play does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.
Consider the following example:
export const InputFieldFilled: Story<InputFieldProps> = {
play: async () => {
await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
},
};
You can use the play function like this:
const { InputFieldFilled } = composeStories(stories);
test('renders with play function', async () => {
render(<InputFieldFilled />);
// play an interaction that fills the input
await InputFieldFilled.play!();
const input = screen.getByRole('textbox') as HTMLInputElement;
expect(input.value).toEqual('Hello world!');
});
main