Question

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

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

渲染不崩溃

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导出一样。

Answer 2

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

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

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

2 个答案: