document is not defined

[Dalez]

What version of Next.js are you using?

11.1

What version of Node.js are you using?

16.4.2

What browser are you using?

Chrome 92

What operating system are you using?

macOS 11.5.2

How are you deploying your application?

Vercel

Describe the Bug

Since updating to NextJS 11.1, I am unable to run any tests. The error I get is:

document is not defined
ReferenceError: document is not defined
    at render (/Users/.../node_modules/@testing-library/react/dist/pure.js:83:5)
    at Object.<anonymous> (/Users/.../src/components/PullRequest/PullRequest.test.tsx:31:5)
    at Promise.then.completed (/Users/.../node_modules/jest-circus/build/utils.js:390:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/Users/.../node_modules/jest-circus/build/utils.js:315:10)
    at _callCircusTest (/Users/.../node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at _runTest (/Users/.../node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/Users/.../node_modules/jest-circus/build/run.js:66:9)
    at _runTestsForDescribeBlock (/Users/.../node_modules/jest-circus/build/run.js:60:9)

Here is my Jest config:

  "jest": {
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": [
        "babel-jest",
        {
          "presets": [
            "next/babel"
          ]
        }
      ]
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "moduleNameMapper": {
      ".+\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "<rootDir>/src/setupTests.ts"
    ],
    "setupFilesAfterEnv": [
      "@testing-library/jest-dom/extend-expect"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!<rootDir>/node_modules/",
      "!<rootDir>/src/pages/*"
    ],
    "coverageReporters": [
      "text-summary",
      "lcov",
      "html",
      "text"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    }
  }

Which matches the documentation: https://nextjs.org/docs/testing, its just in my package.json instead of its own jest.config.js file.

Expected Behavior

It run the tests correctly.

To Reproduce

Create a new NextJS 11.1 project. Add the above Jest config to your package.json. Create a new component and test, something similar to this:

describe("Component", (): void => {
  it("renders", (): void => {
    render(<Component {...props} />);

    expect(screen.getByRole("link", { name: /title/i })).toBeInTheDocument();
  });
});

Run the test, it should fail.

[delbaoliveira]

Hi @Dalez! Thank you for reporting this, I appreciate it. It raised a gap in our docs and example caused by my oversight: I didn't update our example to the latest Jest which changed the default testing environment from jsdom to node. @testing-library/react requires a jsdom environment because it makes use of DOM elements like document.body.

You can solve the error by changing the testing environment to jsdom by adding the following comment to any test files that use @testing-library/react

/**
 * @jest-environment jsdom
 */

You can also configure the jsdom environment globally by updating the Jest testEnvironment configuration option but it's not recommended.

I will update the example and testing docs accordingly.

[Dalez]

Ahh brilliant, thank you! For some reason Github isn't letting me mark this as the answer :(