Using Cypress to Write Tests for a React Application

End-to-end (E2E) testing verifies application flow from start to finish. Instead of manual testing, continuous integration (CI) automates this process. Write code, save it, and let the tools ensure it doesn't break existing functionality. Cypress is a powerful E2E testing framework that simplifies this process, particularly for modern JavaScript libraries like React.

Setting up a Test Application

This tutorial uses a sample todo application. Clone the repository to follow along:

git clone [email protected]:kinsomicrote/cypress-react-tutorial.git

Navigate to the directory and install dependencies:

cd cypress-react-tutorial
yarn install

Install Cypress:

yarn add cypress --dev

Open Cypress:

node_modules/.bin/cypress open

For easier access, add this script to package.json:

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

Now run yarn cypress to open Cypress. Start the React app with yarn start to see the application.

Let's create a basic test in cypress/integration/init.spec.js:

describe('Cypress', () => {
  it('is working', () => {
    expect(true).to.equal(true);
  });
});

This confirms Cypress is working. Now, let's test visiting the app:

it('visits the app', () => {
  cy.visit('http://localhost:3000');
});

To avoid repeating the URL, set a base URL in cypress.json:

{
  "baseUrl": "http://localhost:3000"
}

The test can now be simplified to:

it('visits the app', () => {
  cy.visit('/');
});

Testing Form Controls and Inputs

Create cypress/integration/form.spec.js to test user interaction.

describe('Form', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('focuses the input', () => {
    cy.focused().should('have.class', 'form-control');
  });

  it('accepts input', () => {
    const input = "Learn about Cypress";
    cy.get('.form-control')
      .type(input)
      .should('have.value', input);
  });

  it('displays list of todos', () => {
    cy.get('li').should('have.length', 2);
  });

  it('adds a new todo', () => {
    const input = "Learn about Cypress";
    cy.get('.form-control')
      .type(input)
      .type('{enter}')
      .get('li')
      .should('have.length', 3);
  });

  it('deletes a todo', () => {
    cy.get('li')
      .first()
      .find('.btn-danger')
      .click()
      .get('li')
      .should('have.length', 1);
  });

  it('deletes all todos', () => {
    cy.get('li')
      .first()
      .find('.btn-danger')
      .click()
      .get('li')
      .first()
      .find('.btn-danger')
      .click()
      .get('.no-task')
      .should('have.text', 'All of your tasks are complete. Nicely done!');
  });
});

These tests cover input focus, input acceptance, initial todo count, adding a new todo, deleting a single todo, and deleting all todos.

Testing Network Requests

Testing network requests ensures data fetching works correctly. For example, using the JSON Placeholder API:

describe('Request', () => {
  it('displays random users from API', () => {
    cy.request('https://jsonplaceholder.typicode.com/users')
      .should((response) => {
        expect(response.status).to.eq(200);
        expect(response.body).to.have.length(10);
        expect(response).to.have.property('headers');
        expect(response).to.have.property('duration');
      });
  });
});

This verifies the API response status, data length, and response properties.

Running Tests from the Command Line

Run Cypress tests from the terminal:

npx cypress run

To run specific tests:

npx cypress run --spec "cypress/integration/form.spec.js"

This provides a command-line summary of the test results. Refer to the Cypress documentation for more advanced command-line options.

Conclusion

Cypress simplifies E2E testing, making it accessible and beneficial for developers. This tutorial demonstrates basic to intermediate testing techniques, encouraging you to explore its capabilities further. Remember to consult the Cypress documentation for more advanced features and best practices.

The above is the detailed content of Using Cypress to Write Tests for a React Application. For more information, please follow other related articles on the PHP Chinese website!