There and Back Again:

e2e testing (React) with Cypress

Nikola Đuza

Software Engineer at ToptalΒ πŸ–₯

Novi Sad JS Organizer πŸ—£

Rails and React πŸ’Ž

What this talk is?

  • High level principles of testing (with Cypress) ⬆️
  • Low level principles of Cypress testing ⬇️
  • Opinionated πŸ€”πŸ˜„

What this talk is NOT?

  • Detailed Cypress walkthrough πŸšΆβ€β™€οΈ
  • Convincing you that you should test
  • An ad πŸ›‘

Write tests.

Why test?

  • Make sure stuff works
  • And that it will work

Why test?

CONFIDENCE

Why test?

Why test?

Not too many.

Code coverage

Code coverage

Code coverage

How much is enough?

Code coverage

How much is enough?

Β―\_(ツ)_/Β―

Code coverage

How much is enough?

Β―\_(ツ)_/Β― IT DEPENDS

Mostly integration.

The "Smoking" Testing Pyramid

The Testing Square

The Testing Trophy

Static tests (analysis)

Flow

ESLint

Static tests (analysis)

Check out

Unit tests

Integration tests

e2e tests

What is

❓

Let's see it πŸ‘€

$ npm install cypress

What is

  • Takes snapshots πŸ“Έ
  • Time travel 🏍
  • Easy debugging πŸ›
  • Native access

Pros:

What is

Cons:

  • Not easy to talk to outside world 🌍
  • Write tests in JavaScript only
  • No cross-browser testing

What is

Cons:

  • Not easy to talk to outside world 🌍
  • Write tests in JavaScript only
  • No cross-browser testing (soon)

Cypress Best Practices

Cypress Best Practices

Test login flow

Cypress Best Practices

Test login flow

BUT

ONLY ONCE

Login test example

Login test example

Viewing the settings page

Viewing the settings page

Login without UI test example

Page Object pattern

Β 

Page Object pattern

Cypress Custom Commands

Adding a Cypress Custom Command

Login without UI test example

Testing Login Flow only once

gives you

  • More speed 🏎
  • Testing in isolation
  • Less complex tests

Cypress Best Practices

DO NOT USE

UI

TO POPULATE DATA

Cypress Best Practices

CLEAN UP STATE

BEFORE

TESTS RUN

Selenium-based tools

In Cypress

There's no guarentee this will run

Clean up state before tests run

Cypress Best Practices

START A WEB SERVER PRIOR TO RUNNING CYPRESS

Start a web server prior to running Cypress

$ npm start & cypress run

Start a web server prior to running Cypress

πŸ™…β€β™€οΈπŸ›‘βœ‹πŸ™…β€β™€οΈ

$ npm start & cypress run

Start a web server prior to running Cypress

$ npm start & cypress run

πŸ™…β€β™€οΈπŸ›‘βœ‹πŸ™…β€β™€οΈ

$ npm start & wait-on http://localhost:8080
$ cypress run

Start a web server prior to running Cypress

$ npm test

Cypress Best Practices

Check out more at:

Cypress + React = ❀️

Snapshot testing

Snapshot testing

HTML

Snapshot testing

JSON response

Redux

exposing the store

Redux

dispatching action objects

Redux

dispatching actions from our code

Redux + Snapshots

checking state with snapshot testing

React Unit Tests

React Unit Tests

File upload

File upload

BUT WAIT βœ‹

BUT WAIT βœ‹

Β 

YOU JUST STUBBED

A SERVER RESPONSE

BUT WAIT βœ‹

Β 

YOU JUST STUBBED

A SERVER RESPONSE

Β 

IT'S NOT A "TRUE" E2E TEST?! πŸ€”

STUBBING REQUESTS

REAL REQUESTS

Writing e2e tests in Cypress

MEANS WRITING BOTH

  • e2e tests πŸ–πŸ”β›°

  • integration tests πŸ—»πŸ”„πŸ”

Testing Trophy

Testing Trophy

cheap

πŸ’΅πŸ’°

Testing Trophy

cheap

πŸπŸ’¨

🐒

πŸ’΅πŸ’°

Testing Trophy

cheap

πŸπŸ’¨

🐒

πŸ’΅πŸ’°

BIG PROBLEMS 🀯

Small problems 😌

Integration tests provide best balance of:

  • πŸ’΅
  • πŸπŸ’¨
  • 😌

That's why testing in Cypress is:

  • cheap πŸ’΅
  • fast πŸπŸ’¨
  • fun 😌
$ npm install cypress

Thank you!

Thank you!

e2e testing with Cypress

By Nikola Đuza

e2e testing with Cypress

Why and how to do (e2e) tests with Cypress.

  • 60
Loading comments...

More from Nikola Đuza