Cypress
Component Testing

Cypress: Component Testing

  • Provides a testable component workbench
  • Isolates the component to test how it works
  • Supports several frameworks
    • Angular
    • React
    • Vue
    • Svelte

Component Explorer

Tools for Component Testing and CDD

  • Storybook
  • Playground
  • Styleguidist
  • Chromatic
  • Vue-play
  • etc.

New: Cypress Component Testing (Beta)

E2E vs Component Testing

The same test runner, commands, and API

E2E

  • Rendering within a complete website
  • Tests match the user experience
  • Can be used for integration testing as well
  • Can be written by developers or QA Teams
  • More difficult to set up, run, and maintain
  • Testing certain scenarios require more setup

Component

  • Using a development server
  • Easier to test components in isolation
  • Easy to set up specific scenarios in tests
  • Fewer dependencies on infrastructure
  • Fast and reliable
  • Do not call into external APIs/Services
  • Usually written by developers working on the component

Setup and demo

Getting started

Install: 

yarn add --dev cypress
or 
npm i --save-dev cypress

Configuring: 

npx cypress open

Choosing Component Testing and follow the process (Framework, Configuration files, Browser)

Our first test

Open component testing directly: 

npx cypress open --component

Using cy.mount() instead of cy.visit():

  1. Template code inside a string
  2. Config object: MountConfig<T> (extends TestModuleMetadata)
  3. Use the same API to make changes and check them

Demo

Storybook vs Cypress Component Testing

  • Differences?
  • Which to choose?