Skip to content
This repository has been archived by the owner on Jan 31, 2024. It is now read-only.

Releases: storybookjs/testing-react

v1.2.2

07 Dec 15:54
Compare
Choose a tag to compare

🐛 Bug Fix

  • fix: align global config types with Storybook 6.4 #75 (@yannbf)

Authors: 1

v1.2.1

06 Dec 13:31
Compare
Choose a tag to compare

🐛 Bug Fix

🔩 Dependency Updates

Authors: 2

v1.2.0

04 Dec 12:25
Compare
Choose a tag to compare

🐛 Bug Fix

  • feat: add storyName to composed story #65 (@yannbf)

Authors: 1

v1.1.0

04 Dec 11:05
Compare
Choose a tag to compare

Release Notes

feat: support exclude/include stories (#64)

Features

This version adds support for the includeStories and excludeStories parameter to filter non-story exports (#64)


🚀 Enhancement

  • feat: support exclude/include stories #64 (@yannbf)

Authors: 1

v1.0.0

23 Nov 09:03
Compare
Choose a tag to compare

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Tom Coleman (@tmeasday)

❤️ @jonniebigodes

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

v1.0.0-next.0

20 Aug 15:46
a1889cf
Compare
Choose a tag to compare
v1.0.0-next.0 Pre-release
Pre-release

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

v0.0.22

15 Aug 15:07
Compare
Choose a tag to compare

🎉 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

📝 Documentation

Authors: 2

v0.0.21

15 Jul 22:33
Compare
Choose a tag to compare

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

v0.0.18

25 Jun 09:04
Compare
Choose a tag to compare

🐛 Bug Fix

⚠️ Pushed to main

Authors: 1

v0.0.17

03 Jun 16:29
Compare
Choose a tag to compare

🐛 Bug Fix

  • Widen peer dependency range to include prereleases #26 (@IanVS)

Authors: 1