Why you should Jest use Cypress
Tyler Graf
FamilySearch
@tylergraf
Hobbies
- My Kids
- Golf
- Sim Racing
- Photography
- F1
- RC Cars
- Chess
The Jest
Purpose
Purpose
-
Intro to cypress component
-
Compare to jest
-
Demo
Assumption: You know React and Jest
Learning Style Myth
Learning Style Myth
Visual
Auditory
Reading/Writing
Kinesthetic
Veritasium
Search: "Veritasium visual learner"
Cypress
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')
})Jest vs Cypress
Differences
| Jest | Cypress | |
|---|---|---|
| Mocking | Module | Network only |
| Debugging | node-debugger | in-browser |
| Display | dom output | Fully rendered in browser |
Demo
Summary
I never want to write another Jest test
Thank you
