Anna McDougall

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS

What if you could debug tests by traveling back in time? See how Cypress makes end-to-end testing for your React app simple and powerful.

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS
#1about 4 minutes

Understanding end-to-end testing and the benefits of Cypress

End-to-end testing validates the complete user workflow, and Cypress provides features like time travel and automatic waiting to simplify this process.

#2about 9 minutes

Installing Cypress and structuring tests with Arrange-Act-Assert

Learn how to install Cypress using NPM and structure your tests logically with `describe` and `it` blocks following the Arrange-Act-Assert pattern.

#3about 8 minutes

Writing your first Cypress test for a login form

Follow a live-coding session to write a login test using core Cypress commands like `cy.visit`, `cy.get`, `.type()`, and `.click()`.

#4about 6 minutes

Adding assertions and debugging failing tests in Cypress

Validate test outcomes using assertions like `.should()` and `.within()`, and see how Cypress provides clear error messages for debugging.

#5about 9 minutes

Automating form submission with programmatic login

Bypass the UI login for subsequent tests by using `cy.wrap()` for programmatic authentication before filling out a multi-field form.

#6about 5 minutes

Asserting element states and final text results

Complete the test by asserting that a button becomes enabled after form completion and that the correct result text is displayed.

#7about 10 minutes

Q&A on mocking responses and advanced test patterns

Explore advanced topics like mocking backend APIs with `cy.intercept`, organizing test code, and using different selector strategies.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Let's get visual - Visual testing in your project44:59

Let's get visual - Visual testing in your project

Ramona Schwering

Advanced Cypress: custom assertions and tasks08:33

Advanced Cypress: custom assertions and tasks

Luca Micieli

Typescript, React and Atomic Design - a match made in heaven40:05

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

Testing web3 applications53:58

Testing web3 applications

Soumaya Erradi

Let's get visual - Visual testing in your project54:23

Let's get visual - Visual testing in your project

Ramona Schwering

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

One-click-to-production: Test and automate your application31:15

One-click-to-production: Test and automate your application

Bartosz Pietrucha

Yes, You Need to Unit Test your JavaScript. Here's How.1:00:10

Yes, You Need to Unit Test your JavaScript. Here's How.

James Bender

From learning to earning

Jobs that call for the skills explored in this talk.