TypeError：无法使用ReactDOM在Jest测试中读取未定义的属性'render'

Question

我正在尝试添加Jest支持，以便在基于webpack的应用程序中测试代码。我认为我有基本配置权限，因为非基于组件的测试（如下面的“添加数字”）通过。但是，当我尝试与DOM交互时，会出现错误。我正在尝试create-react-apps 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增加数字（10ms）

×渲染没有崩溃（3ms）

渲染没有崩溃

TypeError：无法读取未定义的属性'render'

 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可以导入其单个导出值，就像它是TypeScript或ES6模块的default导出一样。