ReferenceError：React 未在 Jest 测试中定义

Question

我有以下行在浏览器中正确执行

eval(Babel.transform(template, { presets: ['react'] }).code);

但是当我运行玩笑测试时，我得到了 ReferenceError: React is not defined

我错过了什么？

更多信息：在测试文件中，我有以下内容：

const wrapper = shallow(<MyComponent/>);
const instance = wrapper.instance();
instance.componentFunction(...)

然后 componentFunction 具有它从测试文件中获取的内容的eval(Babel.transform(template, { presets: ['react'] }).code);行，template可以是类似的内容<span>...</span>

如果需要更多详细信息，请告诉我

Answer 1

@babel/preset已经为您提供了所需的支持。根据react 17文档，我只需要runtime在automatic我的babel.config.json.

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
   }]
  ]
}

如果您使用的@babel/plugin-transform-react-jsx配置应该是

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

后者通常是不需要的，因为@babel/preset-react包含@babel/plugin-transform-react-jsx.

为什么你不应该使用import React from 'react';

该文档指出：

• 有一些不允许的性能改进和简化React.createElement。

还有一个技术 RFC解释了新转换的工作原理。

如果你想升级。React 还提供了一个自动化脚本，可以从代码中删除不必要的导入。

Answer 2

就我个人而言，我在处理 Next.js（配置为jsx: 'preserve'）时偶然发现了这个问题。如果这是 jest 在类似 Next.js 的环境中工作时出现的问题，您可以以相同的方式配置 Jest 使用的 babel：

由于 next.js 已经包含 next/babel 预设依赖项，您也可以使用并进行与您的 next.js 环境更一致的设置。

babel.config.js：

module.exports = {
  presets: ['next/babel']
};

或者，如果任何人遇到此错误时遇到不必要的问题import React from 'react'，因为它已经全局包含并且不需要包含在每个文件中，那么此解决方案可能适合您。如果您需要为玩笑导入或定义全局函数，这也可能对您有所帮助。

我只是在 jest 中将 React 配置为全局定义。

我的jest.config.js：

module.exports = {
  moduleDirectories: ['./node_modules', 'src'],
  // other important stuff
  setupFilesAfterEnv: ['<rootDir>/src/jest-setup.ts']
}

我的src/jest-setup.ts（或等效的jest-setup.js）：

import '@testing-library/jest-dom';
import React from 'react';

global.React = React; // this also works for other globally available libraries

现在我不需要担心导入 React 的每个文件（尽管 eslint 知道 Next.js 不需要这样做）

Answer 3

如果您在 jest 测试文件中使用 JSX，则需要将以下导入行添加到文件顶部：

import React from 'react';

这样做的原因是 Babel 将 JSX 语法转换为一系列React.createElement()调用，如果导入 React 失败，这些调用也会失败。