Delve into front-end testing principles, learn best practices for writing enduring tests, and discover strategies for E2E testing and integration into CI pipelines. Gain actionable testing insights.

React Testing 101 Component, Integration, and End-to-end Testing_1.png

tarball.tar.gz

jest

jest_describe

jest_onlytest

skiptest

aftereach

headless

foo2

opening

first_test

custom

final_job

foo_final

This course will provide you with important information, principles, and experience-based advice, to enter the world of testing methodologies. 

Here, you will learn 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), and how to integrate tests into development and Continuous Integration pipelines.

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.

Front-end Testing 101: Integration and End-to-end Testing

# Introduction
There is more than one contract that the front-end must adhere to. These include a functional contract with the user, a communication contract with the server, and  the visual contract. For the latter, we implement a visual design system and strive to earn every view conformed within the contract.

Many issues stem from testing the visual aspect of a front-end application. **Pixel-by-pixel comparisons are heavy**, slow and unreliable most of the time.
This is because visual regression tests are based on image comparisons. Our code must take a screenshot of a web page and compare it with the previous screenshot. This task is quite time-consuming. While there are f many NPM modules that perform this action for us, they are slow. Moreover, they often display false negatives, which makes users confidence in the system relative to the context. 

For visual regression tests, we usually set a **tolerance ratio** that does not care if, for example, “less than 2% of the pixels are different”. Examine the next image to learn why this ratio needs to be set.





Let's learn about visual regression testing and the tools used for it.

Visual Regression Testing

Introduction

E2E Testing

The First E2E Test

Polishing the E2E test

Ajax Requests

Custom Commands

UI Integration Tests

Other Best Practices

Bonus Section

Conclusion

Appendix

Visual Regression Testing

Introduction