"ReferenceError: document is not defined" when trying to test a create-react-app project

"ReferenceError: document is not defined" when trying to test a create-react-app project

这是我的 __tests__/App.js 文件:

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/containers/App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

// sanity check
it('one is one', () => {
  expect(1).toEqual(1)
});

这是我在 运行 yarn test:

时得到的输出
FAIL  __tests__/App.js
  ● renders without crashing

    ReferenceError: document is not defined

      at Object.<anonymous>.it (__tests__/App.js:6:15)

  ✕ renders without crashing (1ms)
  ✓ one is one

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        0.128s, estimated 1s
Ran all test suites related to changed files.

我是否需要导入另一个模块才能在此处使用 document

感谢您的帮助!

如果您使用 create-react-app,请确保 运行 yarn test 而不是 yarn jest 或其他。

对我来说,这些都有效

在package.json文件中添加测试脚本env标志

"scripts": {
   "test": "react-scripts test --env=jsdom"
}

使用酶

 import { shallow } from 'enzyme';

 it('renders without crashing', () => {
  shallow(<App />);
 });

将评论放在单元测试源代码的顶部

/**
 * @jest-environment jsdom
 */

信号开玩笑以模拟文档和 window。

在 package.json if using jest

"scripts":{
      "test": "jest --env=jsdom"
}

我将 jest.config.js 中的值设置为以下并且有效:

testEnvironment: 'jsdom'

2021 年 9 月,我刚刚 运行 解决了这个问题。我正在学习 React 测试,我通过进入 node_modules 文件夹解决了这个问题。 该文件夹内有一个 jest 文件夹。在 jest 文件夹中有一个 package.json 文件。 在 package.json 文件中,我插入了一件事。类似于上面有人提到的。

package.json 文件

"testEnvironment": "jsdom"

我知道一般我不应该编辑 node_modules 文件夹,但为了继续学习,我不得不这样做。

我不知道对于一个更严肃的项目是否需要其他解决方案。

将其放在 index.test.js(或测试文件)之上。不要把它放在中间或末端。

/** * @jest-environment jsdom */