Painless Testing For React Applications

Gleb Bahmutov, PhD

VP of Engineering

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional

EveryScape

virtual tours

MathWorks

MatLab on the web

Kensho

finance dashboards

11 people. Atlanta, Philly, Boston, LA

Fast, easy and reliable testing for anything that runs in a browser

I have Cypress.io t-shirts (a few)

E2E

integration

unit

Smallest pieces

Testing Pyramid △

Unit tests pass...

E2E

integration

unit

Component

(enzyme with full rendering)

E2E

integration

unit

Website

E2E

integration

unit

Really important to users

Really important to developers

Will Klein

$ npm install -D cypress
it('opens the page', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .should('be.visible')
})
it('adds 2 todos', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  cy.get('.todo-list li')
    .should('have.length', 2)
})

Cypress demo

  • Opening a page
  • Typical test
  • Failing test
  • API and documentation
  • Recording tests
  • CI setup

To learn more:

Egghead.io Cypress Course

Free course (same Egghead.io author!)

Cypress documentation

How does Cypress make 💵

Cypress Dashboard

See, share, and fix failing tests.

Cypress Dashboard

  • Is a paid Saas complement to Cypress app
  • Perfect place to store test results, screenshots and videos
  • Helps find why and when a test started failing

Sliding down the testing pyramid

E2E

integration

unit

Need:

  • real browser (DOM, storage, ...)
  • state cleanup between tests
  • stubbing server

E2E

integration

unit

Need:

  • real browser (DOM, storage, ...)
  • state cleanup between tests
  • stubbing server

WAIT A MINUTE!

Interact, inspect, use

$ npm install -D cypress cypress-react-unit-test
import { HelloSpider } from './src/hello-spiderman.jsx'
import React from 'react'
import { mount } from 'cypress-react-unit-test'
  

React component test demo with Cypress

it('works', () => {
  mount(<HelloSpider />)
  // start testing!
  cy.contains('Hello Spider-man!')
})
  

See: Extracting React Component

by Josh Justice

https://www.youtube.com/watch?v=Sth0bGfFOMw

Just saying ...

Just saying ...

Just saying ...

Thank you

Cypress at ReactNYC

By Gleb Bahmutov

Cypress at ReactNYC

Testing is hard. End to end testing is really hard. But maybe it is hard because our tools are not up to the task. What if we could redesign the testing experience from the ground up to be fast, useful and effective? Presented at ReactNYC meetup in May 2018

  • 859
Loading comments...

More from Gleb Bahmutov