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
At least half of [RealWorld](https://www.educative.io/courses/front-end-testing-integration/conduit) features require a user to be authenticated. By default, Cypress does not allow you to share the state between the tests (which would otherwise be an anti-pattern). We need to transform the signup process into something usable by every test: a *Cypress custom command*.

A Cypress Custom Command is a function that can be called from the global `cy` object. We are going to create a `cy.signupV1()` command to be run before every other test.

Steps to create a new Cypress custom command:

- Create a new file containing the code of the command itself in the `cypress/support` directory. The file should be: `cypress/support/signup/signup-v1.js`.

- Add the wrapper of the code.

```javascript
Cypress.Commands.add("signupV1", (/* the params of the command */) => {
  /* the code of the command */
});
```

- Import the newly created file from the `cypress/support/commands.js` file.

```javascript
import "./signup/signup-v1";
```

- Start writing a new test that calls the `cy.signupV1()` command.

```javascript
context("Whatever test", () => {
  it("Should leverage the custom registration command", () => {
    cy.signupV1();
  });
});
```

- Run the test!

While the new command does nothing at the moment, it will be the foundation of `cy.signupV1` command.

# First signup command

The core of the command is the same as the following code.


Signup

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

Signup

Introduction