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