Test _app.tsx file in Next.js

If you're new to unit tests with Jest, especially in Next.js, and haven't figured out how to test the _app.tsx or _app.jsx file yet. I'll show you a way.

Why we even need to test the _app file?

Sometimes, you may need to test some logic that is added to _app.tsx file, such as some app configurations, settings, themes...

As we're using one of the features of a library called @testing-library/react - a very famous one with over 7M weekly downloads.

Try to install it if you haven't installed it yet.

powershell


npm i @testing-library/react

Install @testing-library/react

Feel free to use your preferred choice of package manager to install this, such as npm, yarn, bun, pnpm.

Next, create a separate file to test your _app.tsx or _app.jsx file, it should be something under the configured test location, such as __tests__/app/_app.test.tsx, and fill as follows:

tsx


import { render, screen, waitFor } from '@testing-library/react';
import App from '@/app/_app';

describe('App', () => {
  it('test the App component', () => {
    // Act
    render(<App Component={() => <div>Test</div>} pageProps={{}} router={{} as any} />);

    // Assert
    waitFor(() => {
      expect(screen.getByText('Test')).toBeInTheDocument();
    });
  });
});

Test the _app component - App.

Next, feel free to add more test into this test suite as needed, because you may want to test further functionality, not just the App component, such as the theme, the global state... etc.

Try and let me know if it works.

I hope this helps. Have a great day.

Test _app.tsx file in Next.js

Why we even need to test the _app file?

Comments (0)

Comments (0)