How to Test Error Page using Cypress

Introduction

Cypress is a powerful end-to-end testing framework that allows developers to write tests for web applications.

In this article, we'll focus on testing the ErrorPage component, which is displayed when there's an error loading project data in our application.

We'll use Cypress to simulate an error and verify that the ErrorPage is rendered correctly with the expected error message and a refresh button.

Prerequisites

Before we proceed, make sure you have Cypress installed in your project. If not, you can install it by running the following command:

npm install cypress --save-dev

Setting Up the Test

To get started, create a new Cypress test file. Me? I'll just name it as error-page.spec.ts. Open the file and write the test case:

describe("Error Page", () => {
  context("Error", () => {
    const ErrorMsg = "There was a problem while loading the project data";

    it("simulates an error when dashboard cannot be displayed", () => {
      cy.intercept(
        {
          method: "GET",
          url: "https://myURL",
        },
        {
          forceNetworkError: true,
        }
      ).as("getNetworkFailure");

      cy.visit("http://localhost:3000/dashboard");
      cy.wait("@getNetworkFailure");
      cy.wait(10000);
      cy.contains(ErrorMsg).should("be.visible");
    });
  });
});

In the code above, we intercept the network request to https://myURL endpoint and force a network error.

This simulates the scenario where the dashboard cannot be displayed due to an error.

We then visit the dashboard page, wait for the network failure using cy.wait("@getNetworkFailure"), and wait for an additional 10 seconds to ensure the error message is rendered.

Finally, we use cy.contains() to assert that the ErrorMsg is visible on the page. This verifies that the ErrorPage component is rendered correctly when an error occurs.

What Does ErrorPage Component Look Like

The ErrorPage component is responsible for displaying the error message and providing a refresh button. Here's an example of how the component can be implemented:

import { useRouter } from "next/router";
import * as E from "./ErrorPage.styles";

export function ErrorPage() {
  const router = useRouter();
  const ErrorMsg = "There was a problem while loading the project data";

  return (
    <E.Container>
      <E.Wrapper>
        <E.ErrorText>{ErrorMsg}</E.ErrorText>
        <E.RefreshButton onClick={() => router.reload()}>
          Try again
          <E.ArrowIcon src={"/icons/refresh-arrow.svg"} alt="arrow" />
        </E.RefreshButton>
      </E.Wrapper>
    </E.Container>
  );
}

export default ErrorPage;

In the code above, I import the necessary styles from ErrorPage.styles and define the ErrorPage component. It renders the error message using and provides a refresh button using . Clicking the refresh button triggers the router.reload() function, which reloads the page and attempts to retrieve the project data again.

Conclusion

In this article, we've covered how to test the ErrorPage component using Cypress.

By simulating a network error and verifying that the error message is displayed correctly, we ensure that our application handles errors gracefully.

By thoroughly testing our error handling components like the ErrorPage, we can improve the overall reliability and user experience of our application.

Do you have comments or suggestions about this article? please I'm open to any of them!

Hope this helps!