webpack - 类型错误 : Cannot read property 'render' of undefined in Jest test using ReactDOM

Question

我正在尝试在基于 webpack 的应用程序中添加对测试代码的 Jest 支持。我认为我的基本配置正确，因为基于非组件的测试(如下面的“添加数字”)通过了。但是，当我尝试与 DOM 交互时，会出现错误。我正在尝试create-react-apps docs 中描述的smoketest 场景的变体。 docs(测试组件部分)。我的测试文件如下所示:

import React from 'react';
import ReactDOM from 'react-dom';

it('adds number', () => {
  expect(2 + 2).toBe(4);
});

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

输出是:

v adds number (10ms)

× renders without crashing (3ms)

renders without crashing

TypeError: Cannot read property 'render' of undefined

 44 | it('renders without crashing', () => {
 45 |   const div = document.createElement('div');
 46 |   ReactDOM.render(<div/>, div);
    |            ^
 47 | });

  at Object.<anonymous> (/pathto/TestFile.test.tsx:46:12)

我的应用程序不是用 create-react-app 构建的。相反，我尝试按照 Jest webpack documentation 中的说明进行操作。 ，修改它以支持 Typescript。我是否应该期望示例“呈现而不会崩溃”在我的应用程序中工作？我是否需要设置任何浏览器 Jest 配置来支持此功能？这是我的 package.json 中与 Jest 相关的主要配置:

"jest": {
  "roots": [
    "src/app/react"
  ],
  "moduleNameMapper": {
    "\\.(css)$": "identity-obj-proxy"
  },
  "transform": {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.(js|jsx)$": "babel-jest",
    ".+\\.(scss)$": "./node_modules/jest-css-modules-transform"
  },
  "moduleFileExtensions": [
    "js",
    "ts",
    "tsx"
  ]
},

Answer 1

将此添加到您的 tsconfig.json :

{
  "compilerOptions": {
    ...
    "esModuleInterop": true
  },
  ...
}

详情

问题源于此行的转译方式:

import ReactDOM from 'react-dom';

该行表示导入 default从 react-dom 导出模块为 ReactDOM .
react-dom作为 CommonJS 模块发布，因此从技术上讲它没有 default导出。

设置 esModuleInterop标记为 true允许您导入其单个导出值，就好像它是 default TypeScript 或 ES6 模块的导出。