Add Storybook example to Writing Tests

[msutkowski]

A handful of people have recently asked in Discord as well on StackOverflow about how to setup Storybook when using hooks instead of connect. When attempting to help these people, I noticed there weren't any real concrete examples available. The Storybook docs themselves rely on the concept of 'container components' and expect that every component is going to be passed props a la <TaskList tasks=[{...}] />, which isn't typically going to be the case as the usage of hooks increases. This PR offers a solution to that question and is based on the CRA redux template and Redux-Toolkit.

A TypeScript version of this can also be offered, and I can throw in an example repo as well if desired.

Thanks!

---

name: "\U0001F4D6 New/Updated Documentation Content" about: Adding a new docs page, or updating content in an existing docs page

PR Type

Does this PR add a new page, or update an existing page? This PR adds new content to the Recipes > Writing Tests page.

Checklist

• [ ] Is there an existing issue for this PR?
  • link issue here
• [X] Have the files been linted and formatted?

What docs page is being added or updated?

• Section: Recipes
• Page: Writing Tests

For Adding New Content

What kind of content category is this page (tutorial, how-to, explanation, reference)?

This is an example of how to utilize hook-based components with Storybook. There are no concrete examples of how to do this currently that are easily findable.

Who is the intended target audience?

All users

What knowledge are we assuming they have?

None

What are the intended results or takeaways from reading this page?

The goal is to introduce Storybook and show a basic implementation using the current CRA redux template. The reader should understand that a story needs to be wrapped with a Provider just like their App does. They should also see how they can seed data for a component that strictly uses useSelector and useDispatch instead of being passed props directly.

What is the most critical info they should learn?

A story needs access to the store, and once established, the component testing with Storybook can be expanded to fully integrate with RTL/enzyme/etc

For Updating Existing Content

What updates should be made to the page?

Do these updates change any of the assumptions or target audience? If so, how do they change?

[netlify[bot]]

Deploy preview for redux-docs ready!

Built with commit 89036f32e4e5c925763bf05243ca4644f192f7ea

https://deploy-preview-3811--redux-docs.netlify.app

[phryneas]

Another thing that could be added is that all stories sharing the same decorator will share the same store.

So if the decorator is added application-wide, all stories will share the same store instance, if it is added on a file level, all stories from a file will share it, and if a story has it's own decorator, that story will have isolated state.

All three models might be useful depending on usage.

[msutkowski]

Another thing that could be added is that all stories sharing the same decorator will share the same store.

So if the decorator is added application-wide, all stories will share the same store instance, if it is added on a file level, all stories from a file will share it, and if a story has it's own decorator, that story will have isolated state.

All three models might be useful depending on usage.

Agreed on this as well. I didn't know specifically how much detail to go into. Another point would be mentioning initializing storybook via the cli - similar to how setting up jest or RTL is mentioned.

I could also plug that hooking up msw is extremely simple for storybook usage if someone is testing components that rely on async thunks, but I'm not too sure if that is out of the scope of this brief overview. I could definitely use additional input on this @markerikson @phryneas before I do another pass on this, if you don't mind :)

[markerikson]

This is very stale.

@msutkowski , if you feel like redoing this, feel free!