Next.js: Next.js 9.1.7 Impossible to test next/link with enzyme mount.

Created on 4 Jan 2020  ·  13Comments  ·  Source: vercel/next.js

Bug report

Impossible to test next/link with enzyme mount.

Describe the bug

When trying to test a component with next/link using an enzyme mount, an error occurs

Error: Uncaught [TypeError: Cannot read property 'pageLoader' of null].

The error is only in version 9.1.7, in previous versions everything was fine.

To Reproduce

repository to reproduce
https://github.com/gudvinga/next-9.1.7-link-jest-enzyme

  1. yarn install
  2. yarn test
  3. See error

Expected behavior

Should work without error.

System information

  • Version of Next.js: 9.1.7
needs investigation

Most helpful comment

Got the same error using React Testing Library:

  ● Component › should render correctly

    TypeError: Cannot read property 'pageLoader' of null

       6 | describe("Component", () => {
       7 |   it("should render correctly", () => {
    >  8 |     const { getByText } = render(<Component />);
         |                           ^
       9 |
      10 |     expect(getByText("Hello World")).toBeDefined();
      11 |   });

      at Link.handleRef (packages/header/node_modules/next/dist/client/link.js:8:710)

Component.tsx:

...
            <Link href="/">
              <a className={styles.Link}>Hello World</a>
            </Link>
...

Using [email protected] does not throw that error.

All 13 comments

Got the same error using React Testing Library:

  ● Component › should render correctly

    TypeError: Cannot read property 'pageLoader' of null

       6 | describe("Component", () => {
       7 |   it("should render correctly", () => {
    >  8 |     const { getByText } = render(<Component />);
         |                           ^
       9 |
      10 |     expect(getByText("Hello World")).toBeDefined();
      11 |   });

      at Link.handleRef (packages/header/node_modules/next/dist/client/link.js:8:710)

Component.tsx:

...
            <Link href="/">
              <a className={styles.Link}>Hello World</a>
            </Link>
...

Using [email protected] does not throw that error.

Happens to me as well. Any fix available other than using 9.1.6?

Maybe this is useful for anyone debugging: For me this also happened in Next 9.1.6. It appeared my @types/node was updated to _13.0.0_ which yielded the exact same error in my tests (react testing library). After reverting back @types/node to _12.12.22_ all was fine.

I tested Next 9.1.7 afterwards but the error remains the same so I'm sticking to Next 9.1.6 with @types/node 12.12.22 for now.

I'm not sure if I need to edit/add( this to) my own post or make a new one but @types/node 13.1.4 seems works fine with Next 9.1.6. So something between @types/node 13.0.0 and 13.1.4 fixed 'Error: Uncaught [TypeError: Cannot read property 'pageLoader' of null].' in Next 9.1.6.

Facing exact same problem with @testing-library/react

Here is the line causing the issue: https://github.com/zeit/next.js/pull/9644/files#diff-9d07cd98332d8743307195c93020bb17R139

This could simply be made more defensive instead of assuming there is a router reference.

Also seeing this with React Testing Library. This is a complete blocker for me and anyone else doing automated testing (which should be everyone). Hope you guys release 9.1.8 soon.

Probably shouldn't be telling people to upgrade on Twitter when there's this major, show-stopping error happening.

This should be fixed in v9.1.8-canary.6 — please check!

Works for me.

Our tests pass on v9.1.8-canary.6 👍

Works for me with react-test-renderer

It seems all my components that were using useContext are failing now.

Example:

const APP_PROVIDER_DATA = {
    data: {
        currency: '€',
    },
};

describe('<SomeComponent />', () => {
   it('should render the correct price', () => {
        const { getByText } = render(
            <AppProvider data={ APP_PROVIDER_DATA }>
                <SomeComponent price={ 3.5 } />
            </AppProvider>
        );

        const price = getByText('+3.5€');

        expect(price).toBeVisible();
    });
}

<SomeComponent /> uses "useContext" to get the currency symbol but all it gets is an empty object.

All tests were passing before the upgrade. Currently testing with v9.1.8-canary.7

@JoaoFGuiomar that sounds unrelated to this issue. If you believe you've encountered a bug, please open a new issue with a full reproduction.

Locking this to prevent notification spam as multiple users have confirmed it as resolved (I suspect a lot of people subscribed to this issue)! Thank you everyone. 😄

Was this page helpful?
0 / 5 - 0 ratings

Related issues

knipferrc picture knipferrc  ·  3Comments

DvirSh picture DvirSh  ·  3Comments

havefive picture havefive  ·  3Comments

rauchg picture rauchg  ·  3Comments

YarivGilad picture YarivGilad  ·  3Comments