mswjs / examples

Examples of Mock Service Worker usage with various frameworks and libraries.
679 stars 209 forks source link

Add Storybook static build tests #54

Open kettanaito opened 3 years ago

kettanaito commented 3 years ago

Context

In our current Storybook integration example we feature in-browser tests against the running Storybook.

What

We need to add tests for the static Storybook build (as after running the yarn build-storybook command). We will take the static build, open it locally (via Puppeteer since we're already using it in the example), and test two scenarios:

Our current component only features the useFetch hooks that calls fetch underneath. We'd have to create another component that does a request via XMLHttpRequest, create a story for it, and cover it with tests.

Steps

  1. Create a new React component the same as the current GitHubUser component. In the new component, use XMLHttpRequest to make a request, remove the useFetch hook, and the logic around it.
  2. Create a new story for the newly created React component. Put it in the stories/[ComponentName].stories.js.
  3. Create a new E2E test in the e2e/[ComponentName].e2e.test.js. In this test use Puppeteer to load the locally build Storybook project, navigate to the story, and assert that it renders the elements based on the mocked data.
dandelionadia commented 3 years ago

I would like to try to do it.

kettanaito commented 3 years ago

@dandelionadia, that'd be awesome! Let me know if you have any questions.