Next.js 13+ How to test global-error.tsx during development

ONLINECAST

2 min read

·

04-10-2024

5

0

Share

Testing Your Next.js 13+ Global Error Handler During Development

Next.js 13+ introduced a streamlined way to handle errors globally with the app/error.tsx component. This component acts as a catch-all for any uncaught errors within your application, providing a consistent and user-friendly error experience. However, effectively testing this critical component during development can be tricky.

This article will guide you through testing your app/error.tsx component during development, ensuring your error handling remains robust and reliable.

Scenario:

Imagine you have a Next.js 13+ application with a basic error handler in app/error.tsx:

"use client";

import React from "react";

export default function Error({ error }) {
  return (
    <main>
      <h1>Oops! Something went wrong.</h1>
      <p>{error.message}</p>
    </main>
  );
}

This component displays a generic error message and the error message itself. While simple, it's important to test that it functions correctly, displaying the appropriate information when different errors occur.

The Challenge:

The problem is that you cannot simply trigger an error within your application and expect it to be caught by the app/error.tsx component during development. This is because Next.js's development server catches errors and presents them in the browser's developer console.

Solution:

To test your app/error.tsx, you need to directly trigger an error within the component itself. Here's how:

1. Create a Test Utility Function:

   import { render, screen } from "@testing-library/react";
   import Error from "@/app/error";
   
   const throwError = (message) => {
     throw new Error(message);
   };
   
   export const testError = (errorMessage) => {
     render(<Error error={{ message: errorMessage }} />);
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
   };
   

   This function simulates an error by throwing a new Error object with the provided message. Then, it uses @testing-library/react to render the Error component and assert that the error message is displayed on the page.

2. Write Your Tests:

   import { testError } from "./test-utils";
   
   describe("Error Component", () => {
     it("should display a generic error message and the error message", () => {
       testError("Something went wrong!");
     });
   
     it("should display the error message when a specific error occurs", () => {
       testError("Network error!");
     });
   });
   

   These tests use the testError utility function to trigger different error scenarios and check if the expected content is displayed.

Additional Considerations:

• Testing Different Error Types: Consider testing different error types, such as network errors, API errors, and internal server errors, to ensure your app/error.tsx component handles them appropriately.
• Conditional Logic: If your error handling logic depends on the type of error, make sure to write tests for those conditional branches.
• Error Boundaries: If you're using error boundaries in your application, test how your app/error.tsx component interacts with them.

Conclusion:

Testing your app/error.tsx component during development is crucial for ensuring a smooth and consistent error experience for your users. By using a simple test utility function and writing specific test cases, you can effectively verify the functionality of your global error handler and maintain a robust and reliable application.