Releases: storybookjs/testing-react
v1.2.2
v1.2.1
🐛 Bug Fix
🔩 Dependency Updates
- chore(deps): bump url-parse from 1.5.1 to 1.5.3 in /example #72 (@dependabot[bot])
- chore(deps): bump path-parse from 1.0.6 to 1.0.7 in /example #71 (@dependabot[bot])
- chore(deps): bump tar from 6.1.0 to 6.1.11 in /example #68 (@dependabot[bot])
- chore(deps): bump ws from 5.2.2 to 5.2.3 in /example #67 (@dependabot[bot])
- chore(deps): bump tmpl from 1.0.4 to 1.0.5 in /example #66 (@dependabot[bot])
Authors: 2
- @dependabot[bot]
- Yann Braga (@yannbf)
v1.2.0
v1.1.0
v1.0.0
🎉 This release contains work from new contributors! 🎉
Thanks for all your work!
❤️ Tom Coleman (@tmeasday)
Release Notes
Version 1.0.0 (#60)
💥 Breaking Change
Updates Storybook peer dependency to 6.4
Features
CSF3
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}>
}
Play function
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!');
});
📝 Documentation
- Chore: (Docs) Updates the assets used in the documentation for the addon #52 (@jonniebigodes)
Authors: 3
- @jonniebigodes
- Tom Coleman (@tmeasday)
- Yann Braga (@yannbf)
v1.0.0-next.0
Release Notes
feat: support CSF3 format (#46)
Features
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 - Interactions with play function
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!');
});
💥 Breaking Change
Authors: 1
- Yann Braga (@yannbf)
v0.0.22
🎉 This release contains work from a new contributor! 🎉
Thank you, null@payapula, for all your work!
Release Notes
Revert CSF3 support (#43)
Fixes
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
.
🐛 Bug Fix
- Revert CSF3 support #43 (@yannbf)
- chore: update auto configuration #45 (@yannbf)
- (docs) README - Corrected a small typo #39 (@payapula)
📝 Documentation
Authors: 2
v0.0.21
Release Notes
feat: support CSF3 format (#37)
Features
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!');
});
🐛 Bug Fix
Authors: 1
- Yann Braga (@yannbf)
v0.0.18
🐛 Bug Fix
- Update TS information #33 (@eric-burel)
⚠️ Pushed to main
- json -> jsonc into tsconfig code block (@eric-burel)
Authors: 1
- Eric Burel (@eric-burel)