1 min read

Test _app.tsx file in Next.js

Most of the cases, you don't need to, but for some, you do.

Share via

Posted by

Posted on

Updated on

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.

Comments (0)

Share via

Posted by

TThức Trần

Posted on

Updated on