Use Storybook for Unit Tests instead of directly using components

[Harkunwar]

Enter your suggestions in details:

I want to propose that we use components derived from storybook in our unit tests, instead of directly using those components. For each of the test we write at the moment, there's a lot of duplication that goes between creating different stories as well as then re-creating the same components in our unit tests. This is not limited to just that, but also includes setting up decorators, mocking some functionality and more. Using storybook components could make the process really simpler.

There's a few routes we can take to tackle this issue:

1. The simplest route would be using the composeStories method supplied by Storybook to pull in the stories. The full steps of using it are defined here: https://github.com/storybookjs/testing-react
2. Since majority of our tests are snapshot tests, we could just use this Storybook's snapshot testing (https://storybook.js.org/docs/react/writing-tests/snapshot-testing), to just take snapshots of all our stories. This will reduce further duplication of manually writing a snapshot test for each component. The complication it brings is that is uses puppeteer, which will introduce chromium to the architecture, although would definitely be more reliable than JSDOM. We could also combine this with the previous method where snapshot testing happens automatically while we use components derived from storybook for other testing reasons.
3. Lastly, we could move all our UI Testing to Storybook interaction testing (https://storybook.js.org/docs/react/writing-tests/interaction-testing). This will allow us to directly run tests in the browser on the stories. It makes it really easy to write and debug really complicated tests, as well as replay them easily, as such functionality is difficult without a visual browser. That way unit testing could just be reserved for non UI related tests, such as pure functions, etc.

storybook-interaction.mp4

[ovflowd]

Big +1 for this :)

(And thanks for taking time to write this down!!)

[Harkunwar]

I could start with doing snapshot testing using storybook, and removing existing unit tests. Once I'm done with that, I can start migrating the UI unit tests over to storybook interaction testing. How does that sound?

[ovflowd]

Sounds solid :)

[mikeesto]

Looks like this has been implemented now. Thanks @Harkunwar