Painless testing for React applications

@bahmutov

ReactJS Boston

@bahmutov

glebbahmutov.com

github.com/bahmutov

slides.com/bahmutov

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

EveryScape

virtual tours

MathWorks

MatLab on the web

Kensho

finance dashboards

@bahmutov

8 people. Atlanta, Philly, Boston, LA

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

E2E

integration

unit

Smallest pieces

@bahmutov

Testing Pyramid △

Unit tests pass...

https://twitter.com/kentcdodds/status/628658648001048577

@bahmutov

E2E

integration

unit

Component

@bahmutov

(enzyme with full rendering)

@bahmutov

E2E

integration

unit

Website

@bahmutov

You go to a dealership to take a new car for a test drive, not to measure its wheels

@bahmutov

planning

coding

deploying

staging / QA

production

E2E

Users

@bahmutov

planning

coding

deploying

staging / QA

production

💵

E2E

Users

💵

🐞$0

💵

💰

@bahmutov

💵

planning

coding

deploying

staging / QA

production

💵

E2E

Users

💵

🐞$0

💵

💰

Answer: E2E

@bahmutov

💵

Let's test!

Open and control real browser

Your tests

Selenium

Driver

FF, Chrome , IE

@bahmutov

Let's test!

Open and control real browser

Your tests

FF, Chrome , IE

@bahmutov

slow, flaky, unreliable tests

Let's test!

Your tests

FF, Chrome , IE

@bahmutov

Let's test!

Your tests

Headless browser

@bahmutov

What is happening?

$ npm install -D cypress

@bahmutov

Win / Mac / Linux
MIT License
OSS https://github.com/cypress-io/cypress
http://on.cypress.io/introduction-to-cypress

// ui-spec.js
it('loads the app', () => {
  cy.visit('https://some-url.com')
  cy.get('.todoapp').should('be.visible')
})

const visit = () => cy.visit('/')

describe('UI', () => {
  beforeEach(resetDatabase)
  beforeEach(visit)

  context('basic features', () => {
    it('starts with zero items', () => {
      cy.get('.todo-list')
        .find('li')
        .should('have.length', 0)
    })
  })
})

https://on.cypress.io/api

github.com/cypress-io/cypress-example-todomvc

https://docs.cypress.io/examples/examples/tutorials.html#Test-a-React-Todo-App

Cypress demo

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

@bahmutov

Sliding down the testing pyramid

https://www.cypress.io/blog/2018/04/02/sliding-down-the-testing-pyramid/

@bahmutov

E2E

integration

unit

Need:

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

@bahmutov

E2E

integration

unit

Need:

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

WAIT A MINUTE!

@bahmutov

Interact, inspect, use

@bahmutov

cypress-vue-unit-test

cypress-react-unit-test

cypress-svelte-unit-test

cypress-hyperapp-unit-test

...

@bahmutov

https://github.com/bahmutov/cypress-react-unit-test

$ 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!')
})

E2E

integration

unit

Why are they called

cypress-<X>-unit-test ?!

Cypress for Integration

@bahmutov

E2E

integration

unit

https://twitter.com/rauchg/status/807626710350839808

@bahmutov

function add(a, b) {
  return a + b
}

add(a, b)

outputs

inputs

a, b

returned value

@bahmutov

it('adds', () => {
  expect(add(2,3)).to.equal(5)
})

Unit test

@bahmutov

function add(a, b) {
  const el = document.getElementById('result')
  el.innerText = a + b
}

add(a, b)

outputs

inputs

a, b

DOM

@bahmutov

it('adds', () => {
  add(2,3)
  const el = document.getElementById('result')
  expect(el.innerText).to.equal('5')
})

Integration test?

@bahmutov

function add() {
  const {a, b} = 
    JSON.parse(localStorage.getItem('inputs'))
  const el = document.getElementById('result')
  el.innerText = a + b
}

add(a, b)

outputs

inputs

localStorage

DOM

@bahmutov

it('adds', () => {
  localStorage.setItem('inputs') =
    JSON.stringify({a: 2, b: 3})
  add()
  const el = document.getElementById('result')
  expect(el.innerText).to.equal('5')
})

Integration test?

@bahmutov

component

outputs

inputs

DOM,

localStorage,

location,

HTTP,

WW, SW,

...

DOM,

localStorage,

location,

HTTP,

WW, SW,

...

@bahmutov

component

outputs

inputs

DOM,

localStorage,

location,

HTTP,

WW, SW,

...

DOM,

localStorage,

location,

HTTP,

WW, SW,

...

Unit test

Set up

Assert

Mount

@bahmutov

E2E

unit

it('logs user in', () => {
  cy.visit('page.com')
  cy.get('#login').click()
})

@bahmutov

E2E

unit

it('logs user in', () => {
  mount(LoginComponent)
  cy.get('#login').click()
})

@bahmutov

E2E

unit

Use same syntax, life cycle and Cypress API

🔋🔋🔋🔋🔋🔋🔋🔋🔋🔋🔋

@bahmutov

https://www.cypress.io/#testimonials

Thank you

@cypress_io

@bahmutov

📽 slides.com/bahmutov/painless-react-testing

🌐 www.cypress.io

📓 Test a React Todo App

Painless Testing for React Applications

By Gleb Bahmutov