ReferenceError：React 未在玩笑測試中定義

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

如果您在 jest 測試文件中使用 JSX，則需要將以下導入行添加到文件頂部：

import React from 'react';

這樣做的原因是 Babel 將 JSX 語法轉換為一系列React.createElement()調用，如果你無法導入 React，這些都會失敗。

Answer 2

如果遇到此錯誤的任何人都遇到了不需要import React from 'react'的問題，因為他們使用的是 Next.js（或其他設置，其中 React 已在全球范圍內包含並且不需要包含在每個文件中，那么此解決方案可能適合您。

我只是簡單地將 React 配置為以開玩笑的方式全局定義。

我的jest.config.js ：

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

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

global.React = React;

現在我不需要擔心每個文件都會導入 React（即使 eslint 知道 Next.js 不需要這樣做）

Answer 3

@babel/preset已經支持你所需要的。 根據react 17 文檔，我只需在我的babel.config.json runtime設置為automatic 。

{
  "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 。

Answer 4

這發生在我身上react-native和 jest 和其他與單元測試相關的 node_modules 升級后。 這是我的工作配置：

jest.config.js

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  moduleDirectories: ['./node_modules', 'src'],
  cacheDirectory: '.jest/cache',
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!@react-native|react-native)',
  ],
  moduleNameMapper: {
    '^[./a-zA-Z0-9$_-]+\\.svg$': '<rootDir>/tests/SvgStub.js'
  },
  setupFiles: ['./jest-setup.js'],
  modulePathIgnorePatterns: ['<rootDir>/packages/'],
  watchPathIgnorePatterns: ['<rootDir>/node_modules'],
}

對於設置文件，我必須使用特定於項目的./jest-setup.js但對於一般用途'./node_modules/react-native-gesture-handler/jestSetup.js'也應該有效。

babel.config

{
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
    'react-native-reanimated/plugin'
  ]
};

資料來源： https://github.com/facebook/jest/issues/11591#issuecomment-899508417

有關此處依賴項的更多信息： https://stackoverflow.com/a/74278326/1979861

Answer 5

如果您將測試數據存儲在包含 JSX 的單獨測試數據文件中，您還需要導入 react，因為您的文件包含 JSX，因此會導致ReferenceError: React is not defined in jest tests錯誤。

const testData = {
  "userName": "Jane Bloggs",
  "userId": 101,
  "userDetailsLink": <a href="details/101">Jane Bloggs</a>
};

導入反應，如下所示，解決了錯誤。

import React from "react";

const testData = {
  "userName": "Jane Bloggs",
  "userId": 101,
  "userDetailsLink": <a href="details/101">Jane Bloggs</a>
};