Failed to load "/_app"

I have basically copied over the code from the example and adapted it to render the main route “/”. The test just tests if there’s a certain text. I don’t understand why it can’t render _app. Is there a way to have info in the error output?

test:

import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { getPage } from 'next-page-tester';

describe('Main route', () => {
  it('redirects to the Dashboard after log in', async () => {
    const { render } = await getPage({
      route: '/dashboard',
    });

    render();
    expect(screen.getByRole('Button', {
      name: /log in/i
    })).toBeInTheDocument();

    userEvent.click(screen.getByText('Log in', {
      exact: true
    }));
    await screen.findByText(/hallo tim/i);
  });
});

_app.tsx:

import '../styles/index.css';
import '../styles/_app.css';
import '../styles/course_content.css';
import type { AppProps } from 'next/app';
import { useStore, loadStore } from '../store';
import { Auth } from '../views';
import { useEffect, useState } from 'react';
import moment from 'moment';

// App component wrapping each page / route
export function MyApp({ Component, pageProps }: AppProps) {
  const [storeLoaded, setStoreLoaded] = useState(false);
  const { user, getLoginStatus } = useStore(({ user, getLoginStatus }) => ({
    user,
    getLoginStatus,
  }));
  const isLoggedIn = getLoginStatus();

  useEffect(() => {
    loadStore(useStore);
    setStoreLoaded(true);
  }, []);
  
  moment.locale('de', {
    weekdays: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
    weekdaysMin: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
    week: {
      dow: 1,
    },
  });

  // Render requested page when logged in, render auth view
  // If store hasn't loaded yet, render empty view
  return storeLoaded ? (
    isLoggedIn ? (
      <Component {...pageProps} />
    ) : (
      <Auth {...pageProps} />
    )
  ) : (
    <div className='w-full h-full'></div>
  );
}

export default MyApp;

[janbiasi]

hey @toomuchdesign, thanks for the ultra fast response. Yes, I also noticed that the error happens there, I did some debugging to see what the catch block receives as an error. It’s quite strange, as in my case the e variable is an object and not an error, so maybe there’s also an issue within Jest itself, imo. Jest should throw an Error and not an object. However it might be a good idea to anyway log the stringified error in case of failure:

 FAIL  tests/pages/index.test.tsx
  ● Console

    console.log
      >> typeof e: object
      >> e instanceof Error: false
      >> raw:  Error: Configuration error:
      
      Could not locate module ../styles/globals.css mapped as:
      /Users/janbiasi/Documents/github/next-page-tester-issue-269/__mocks__/styleMock.js.
      
      Please check your configuration for these entries:
      {
        "moduleNameMapper": {
          "/^.+\.(css|sass|scss)$/": "/Users/janbiasi/Documents/github/next-page-tester-issue-269/__mocks__/styleMock.js"
        },
        "resolver": undefined
      }

  ● Home › next page test works

    [next-page-tester] Failed to load "/_app"

Would you be open for a PR? 😄

[janbiasi]

I have it configured in jest.config.js, and all other tests that are not using next-page-tester work fine. I still can’t figure out what’s the issue.

@romanserazhiev did you update next page tester to see if you receive a specific error message?