Open
Description
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:
- A request done via fetch.
- A request done via XMLHttpRequest.
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
- Create a new React component the same as the current GitHubUser component. In the new component, use
XMLHttpRequest
to make a request, remove theuseFetch
hook, and the logic around it. - Create a new story for the newly created React component. Put it in the
stories/[ComponentName].stories.js
. - 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.
Metadata
Metadata
Assignees
Labels
No labels