How to use Storybook's interactions for testing wisely?

Question

I'm struggling a bit with interactions in Storybook. What I wanted to achieve was to write some UI tests using interactions and execute those tests in pipeline. But I see some problems, i.e.

1. One play per one story - so only one use case (unless we don't mind having big use cases).
2. Play function fires always after a story is rendered. I haven't found information if we can disable it.

Has anyone worked out any approach for similar use case?

Answer 1

In my team we are starting to do more storybook testing and less standard @testing-library/react tests, especially for more complex components. This is what we have found so far:

• Since storybook uses @testing-library/react anyway, writing tests feels very similarly with the added bonus that we can see what we are doing.
• We create 1 story per use-case. Within that use case we create several steps to document/indicate what we are trying to do.
• We dont mind having the tests run every time you load the page. Why is this is an issue for you? Our tests are stable and idempotent.
• We also setup a blank use-case (with no tests) where you can play without having the actions tab polluted. This is usually our Primary story.
• You can combine use-cases to form more complex use-cases. As user @fan-li mentioned in the comments: https://storybook.js.org/docs/react/writing-stories/play-function#composing-stories
• testing modals was a bit trickier because the modal is not appended in the canvasElement. For this use-case, storybook recommends using the screen element instead of the canvasElement. We also setup a wrapper button for modals, though we only use it for the Primary and let the modals be shown by default for the other use-cases.

Some things that we are missing/not tried yet with storybook testing:

• parameterized tests.
• being able to mock individually, for now we are using the storybook-addon-manual-mocks library to mock things like uuid, etc. This mocks globally, for all tests.
• API mocks: we will be trying this in the coming weeks and we will be trying https://storybook-addon-mock.netlify.app/. Happy to report afterwards.

All-in-all, we are really happy with storybook testing for setting up different usecases.