End-to-end testing

End-to-end testing is the form of testing that focuses on a complete user flow from start to finish. While unit testing efficiently checks for the functions or calculations that provide resulting data (a numerical value, a text string, etc.), end-to-end testing tests multiple layers of the application at once; it's best-suited to make sure buttons, forms, changes, links, and generally entire workflows function without problems.

Jest isn't designed to write end-to-end tests and we can use a much more specified tool for this job, namely Cypress. Writing tests in Cypress is similar to writing tests in Jest, but has the benefit of enabling you to go through the tests step by step, in a user-friendly dashboard.

Let's start by adding Cypress to our application:

npm install cypress

Let's also add a script to start Cypress within our package.json:

"scripts": {
  "cypress": "cypress open"
}

When running Cypress for the first time, it will create a directory in your root with all the necessities needed. Now, let's write a test!

cypress/integration/sample_spec.js
describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

Once you save this file you should see the browser reload. Although it doesn't do anything useful, this is our first passing test! ✅

Alright, let's now start writing something that actually tests a flow within our app. Our first TaskFlow test could be about making sure the navigation keeps functioning as intended. We could start out on the homepage and navigate to the team members page. We'll start our test by opening the navigation. In terms of working with elements on the page, there are a multitude of options. A good practice is to pass an attribute to the element you're selecting. In Cypress this is done by passing data-cy="descriptive name".

See if you can finish this test:

describe("Routing", () => {
  it("Navigates to other pages", () => {
    cy.visit("https://localhost:4200");

    cy.get("[data-cy=identifier]").click();

    // Click one of the navigation items and assure the link is being followed
  });
});

Further reading​

Further reading