Gleb Bahmutov PRO
JavaScript ninja, image processing expert, software quality fanatic
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
- Win / Mac / Linux
- MIT License
- OSS https://github.com/cypress-io/cypress
- https://on.cypress.io/introduction-to-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-testimport { 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!')
})
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
