React-testing-library: ReferenceError: document is not defined

[lawler61]

hello, when i run yarn test, it comes out ReferenceError: document is not defined and node_modules are all lasted version.
anyone can help? thanks a lot.

ReferenceError: document is not defined

       7 | describe('基础 react 单元测试', () => {
       8 |   it('home 组件测试', () => {
    >  9 |     const { getByTestId } = render(<TestExample />);
         |                             ^
      10 |     expect(getByTestId('home-ul').children.length).toBe(3);

      at Object.render (node_modules/@testing-library/react/dist/index.js:68:5)
      at Object.it (tests/unit/example.spec.tsx:9:29)

package.json

"scripts": { "test": "jest" }

jest.config.js

module.exports = {
  setupFilesAfterEnv: [
    '@testing-library/react/cleanup-after-each',
    '@testing-library/jest-dom/extend-expect'
  ],
  testMatch: [
    '**/?(*.)spec.ts?(x)'
  ],
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.json',
      diagnostics: false,
    },
  },
  testEnvironment: 'node',
  preset: 'ts-jest',
}

component and unit test

import React from 'react';
const TestExample = () => {
  return (
      <ul data-testid="home-ul">
        <li>a item</li>
        <li>b item</li>
        <li>c item</li>
      </ul>
  );
};
export default TestExample;

// example.spec.tsx
import React from 'react';
import { render, cleanup } from '@testing-library/react';
import TestExample from '../../src/web/components/test-example';

afterEach(cleanup);

describe('基础 react 单元测试', () => {
  it('home 组件测试', () => {
    const { getByTestId } = render(<TestExample />);
    expect(getByTestId('home-ul').children.length).toBe(3);
  });
});

[kentcdodds]

Hi @lawler61,

React Testing Library needs a DOM to operate. Change your jest config testEnvironment to jsdom and you'll be set.

[CarlosHdez]

Is there a step I might be missing? I have testEnvironment: jsdom configured but I still get window is not defined or document is not defined.
To be clear I'm not using document or window on my test file but the source code I'm trying to test uses it.

Thanks

[nickmccurdy]

Are you sure it's a runtime error and not an error with a tool like ESLint or TypeScript? If so, please send a reproduction of the error.

[CarlosHdez]

I was indeed getting a runtime error, but I was not sure if I was missing a confiugration since we are upgrading our babel to version 7 and this error came after that. Finally I fixed this by also increasing our node version from 10.13 to 10.22
Thanks and sorry for the noice

[drydenwilliams]

If you checkout the Jest docs for test environment you can add a docblock in the specific test file to change the envrironment e.g. changing the .ts file to node would be:

Docblock:

/**
 * @jest-environment node || jsdom
 */

My test file.ts:

/**
 * @jest-environment node 
 */

describe('api-client', () => {
  it('should intercept a 401 status code', (done) => {
    const statusCode = 401
    const testError = [
      { code: 'AUTHENTICATION_FAILURE', message: 'Authentication Failure' },
    ]
    const scope = nock(apiUrl!).get('/products').reply(statusCode, testError)

    fetchProducts()
      .then()
      .catch((error) => {
        expect(error.response.status).toBe(statusCode)
        expect(sessionStorage.removeItem).toHaveBeenCalledTimes(1)
        scope.done()
        done()
      })
  })
});