Course description

React Testing 101: component, integration, and end-to-end testing

Being able to test components and web-apps developed with React is an increasingly important requirement for a front-end developer. There are tools and libraries that simplify the testing process but the learning curve can seem daunting.

"What’s the right way to start testing my web applications?"

"It’s unclear what I'm supposed to test (and what not) and how to do it"

"My current tests fail all the time and don't help me preventing new bugs"

Does this sound familiar?

This course aims to provide basic information, principles and experience-based advices, to enter the world of testing methodologies.

Testing your own web applications is much easier and more profitable than you might think. Even if some advances concepts and benefits may only become evident in the medium to long run this course serves the purpose to overcome the initial obstacles and understand how to take actions and leverage the benefits of testing immediatetely .

During the day, we will see all the useful tests for a web-app developed with React, dealing with the typical cases we encounter on a daily basis. During this course we will teach you:

• The basics and advantages of the main testing techniques applied to React
• How to test your React components productively
• The best practices to follow to write useful and lasting tests
• How to test different user flows without a working back-end
• How to write effective end-to-end tests (E2E)
• How to integrate tests into development and Continuous Integration pipelines

We are going to use Jest, React Testing Library, Cypress and all their useful plugins to increase our daily productivity and test reliability. We will alternate theoretical explanations with live coding sessions, at the end of the course the source code of all the exercises, the material used for explanations, and other in-depth materials will be made available.

Topics:

• Test panorama
• What is an E2E test
  • Browser automation
  • Pros and cons of E2E tests vs UI integration tests
• Cypress
  • The Test Runner
  • Automatic waitings
  • Automatic screenshots e videos
  • Asynchronous execution
• Cypress as your main development browser
• Best practices
  • How to identify DOM elements
  • Waitings instead of pauses, what deterministic events are
  • The right use of the assertions
• Why the tests must be as simple as possible
• Usefulness for all the team members
  • Naming conventions and dedicated scripts
  • Monitoring tests
• Cypres advanced use
  • Custom commands
• Visual Regression Testing for the whole web app
• Continuous Integration
• Jest fundamentals
  • What You will learn
  • What is Jest
  • Setup
  • Running Jest
  • What is a Test Case
  • Watch-mode
  • Valid file test names
  • Add Editor autocompletion
  • Built-in Matchers
  • Custom Matchers
  • Testing Async Code
  • jsdom
  • Jest Lifecycle
  • Mock Functions
  • Mocking a module
  • The Expect object
  • Timers
• The many wait to test React
• Intro to React testing
  • What You will learn
  • Setup
  • react-dom-test-utils
  • Hooks and act
  • jest-dom
• React Testing Library
  • What You will learn
  • What is React Testing Library
  • Why React Testing Library
  • Setup React Testing Library
  • Rendering using React Testing Library
  • Using DOM testing library
  • Implementing and Testing new features
  • Dealing with Context Providers
  • Testing components using Redux

Attendees

This course is for all the developers who have already worked with React but have not yet started, or have not yet succeeded in testing their React web applications. At the end of the course, you will be able to apply the fundamental principles of the test methodologies to understand what and how to test effectively.

Participation requirements

To participate it is necessary, or at least strongly recommended, that you already know the basic concepts behind React: JSX, the components, and their status, lifecycle events, user interaction management.