Skip to main content

Cypress

Introduction

Until now, end-to-end testing wasn’t easy. It was the part developers hated. Not anymore. 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

Mock Service Worker

Testing Storybook Components

Goal: reuse configuration in Storybook for Cypress component testing to simplify testing flow.

Challenges:

  1. To demo your components in Storybook, you need a context, a theme provider and/or wrappers
  2. Components rely on global app CSS to render correctly
  3. It takes significant effort setting up Storybook to get your components to work properly
  4. Need to rewrite all this configuration all over again just to test your components

Resources

RepositoriesNotes
Realworld Cypress React
Cypress for Everything
React Testing Starter
PageNotes
Testing Fundamentals
Mock Service Worker