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

Posted 2023-02-22

【中文标题】TypeError：无法在使用 ReactDOM 的 Jest 测试中读取未定义的属性“渲染”

【英文标题】：TypeError: Cannot read property 'render' of undefined in Jest test using ReactDOM

【发布时间】：2019-08-30 04:24:45

【问题描述】：

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

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"
  ]
,

【参考方案1】：

将此添加到您的tsconfig.json：

  "compilerOptions": 
    ...
    "esModuleInterop": true
  ,
  ...

---

详情

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

import ReactDOM from 'react-dom';

该行表示从react-dom 模块导入default 导出为ReactDOM。

react-dom 作为 CommonJS 模块发布，因此从技术上讲，它没有 default 导出。

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

【讨论】：

非常感谢！很好的解释:)

我的头在办公桌上敲了半天，终于看到你的回答，把它修好了。真的很感激

【参考方案2】：

如果您出于某种原因不想添加 esModuleInterop 配置，则在 TypeScript 中将模块作为单个名称导入的正确语法是：

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