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

# Overview
As we have created a custom [signup command](https://www.educative.io/courses/front-end-testing-integration/signup) for the E2E tests, we should also create an authentication command for the UI Integration Tests too. It will be way far simpler because we do not need a real signup/authentication, we just need the **front-end to think that it's authenticated**.
<br />
We must set the `jwt` token into the local storage. Let's write the `authenticateIntegration` custom command:
# `authenticateIntegration` custom command.
Where can we get a valid `jwt`? From the `signup.json` fixture!

File: `cypress/fixtures/users/signup.json`
```js
{
  "user": {
    "username": "tester",
    "email": "user@realworld.io",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkN2ZiNmVhZDkzZWQ5MDhiMGU3MDMzYiIsInVzZXJuYW1lIjoidGVzdGVyIiwiZXhwIjoxNTczODM4NTg3LCJpYXQiOjE1Njg2NTA5ODd9.jeAccqZi6dOqokwjRPFl4fzHE5s5p8sB32NgXwlgrxQ"
  }
}

```

Cypress allows us to read the fixtures using the `cy.fixture` command. All we need to do is:

- Read the fixture

- Read the contained token

- Set the `jwt` token

The command code is the following:

File: `cypress/support/authentication/authenticate-integration.js`
```js
Cypress.Commands.add("authenticateIntegration", () => {
  cy.fixture("users/signup")
    .its("user")
    .should(
      user =>
        expect(user)
          .to.have.property("token")
          .and.to.be.a("string").and.not.to.be.empty
    )
    .then(user => localStorage.setItem("jwt", user.token));
});

```
Please note that there are some assertions about the fixture content itself. The goal is always the same: to learn more from assertion feedback. If we change the fixture content accidentally, the command will prompt us with a useful message.

The test that navigates the home page leveraging an already "authenticated" user is as following:
> Note: You can see the cypress UI better by opening the link next to **Your app can be found at:**



Learn how to write `authentication custom command` for UI integration tests.

Custom Command

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

Custom Command

Overview

`authenticateIntegration` custom command.

Custom Command

Overview

authenticateIntegration custom command.

`authenticateIntegration` custom command.