Cypress
Cypress makes setting up, writing, running and debugging tests easy.
Cypress (Web Testing Framework) Crash Course - 2021
NX
Running tests
nx e2e [appName]-e2e --watch
Adding configuration to a
nx generate @nrwl/react:storybook-configuration --name=shared-ui --cypressDirectory=storybook-e2e
Testing Storybook
Goal: reuse configuration in Storybook for Cypress component testing to simplify testing flow.
Challenges:
- To demo your components in Storybook, you need a context, a theme provider and/or wrappers
- Components rely on global app CSS to render correctly
- It takes significant effort setting up Storybook to get your components to work properly
- Need to rewrite all this configuration all over again just to test your components