类型错误：无法使用 ReactDOM 在 Jest 测试中读取未定义的属性“渲染”

Question

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

× 渲染而不会崩溃（3 毫秒）

渲染而不会崩溃

类型错误：无法读取未定义的属性“渲染”

 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 文档中的说明进行修改以支持 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允许您导入其单个导出值，就像它是defaultTypeScript 或 ES6 模块的导出一样。