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

Cypress in Apps

By Tyler Graf

Cypress in Apps

115

Tyler Graf