Cypress in Apps

Tyler Graf

Tree Team

Hobbies

  • My Kids
  • Golf
  • Sim Racing
  • Photography
  • F1
  • RC Cars
  • Chess

 

Table of Contents

  • What is Cypress?
  • How to upgrade your app
  • How to write/run tests

What is Cypress?

In-Browser Testing Framework 

e2e

Component

e2e

it('should show the button', () => {
  cy.visit('https://www.familysearch.org')
  
  cy.contains('FamilySearch').should('be.visible')
})

Component

import Header from './Header'

it('should show the button', ()=>{
  cy.mount(<Header />)
  
  cy.contains('FamilySearch').should('be.visible')
})

Differences

Jest Cypress
Mocking Module Network only
Debugging node-debugger in-browser
Display dom output Fully rendered in browser

How to Migrate

npm i -g @fs/fr-cli
fr migrate

Coming Soon

What's Included

Included

  • Cypress Component testing in apps
  • Changes to running tests
  • npm test - runs jest
  • npm test:ci - runs both jest and cypress
  • merge coverage
  • Major bump of @fs/eslint-config-frontier-react@11
    • Fix linting errors
    • Sorry

How to Run Cypress

  • npm run cypress:component
  • cypress open --component --browser chrome
  • cypress run --component --browser chrome
  • cypress run --component --spec="src/components/*.cy.*"

Optional