ReferenceError：反应未在测试中定义

Question

我正在使用 laravel mix，如果我正确解释这个问题，我似乎无法找到反应。

我的测试：

import React from "react";
import renderer from "react-test-renderer";
import AppLayout from "../AppLayout";

test("it renders", () => {
    const component = renderer.create(
        <AppLayout pageTitle={undefined}>App</AppLayout>
    );
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
});

这是我的 package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "test": "cross-env NODE_ENV=test jest --verbose"
    },
    "devDependencies": {
        "@babel/preset-env": "^7.4.2",
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.18.0",
        "babel-jest": "^24.5.0",
        "bootstrap": "^4.3.1",
        "cross-env": "^5.2",
        "jest": "^24.5.0",
        "jquery": "^3.3",
        "laravel-mix": "^4.0.15",
        "lodash": "^4.17.11",
        "popper.js": "^1.14",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.8.6",
        "resolve-url-loader": "^3.0.1",
        "sass": "^1.17.3",
        "sass-loader": "^7.1.0"
    },
    "dependencies": {
        "@babel/core": "^7.4.0",
        "@babel/plugin-proposal-class-properties": "^7.4.0",
        "js-file-download": "^0.4.5",
        "moment": "^2.24.0",
        "npm-check-updates": "^3.1.3",
        "prop-types": "^15.7.2",
        "react-router-dom": "^5.0.0",
        "react-select": "^2.4.2"
    },
    "jest": {


"roots": [
        "resources/js/app"
    ],
    "transform": {".*": "./node_modules/babel-jest"}
}

}

.babelrc

{
    "env": {
        "test": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        },
        "development": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        },
        "production": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        }
    }
}

错误：

ReferenceError: React is not defined

      18 |         const { expanded } = this.state;
      19 |
    > 20 |         return (
         |         ^
      21 |             <div>
      22 |                 <nav
      23 |                     className="navbar"

我已经尝试了所有可以在 stackoverflow 和 google 上找到的方法来解决这个问题。包括删除我的 node_modules 文件夹并多次重建无济于事。

Answer 1

我是这样解决的：import * as React from 'react';

Answer 2

没错，这个问题的答案真的很有趣。 所以你可能知道如果你只是import { Component } from 'react'; 然后export default class MyComponent extends Component 它将工作并在浏览器中呈现。但是，当您使用 jest 进行测试时，即使您将 React 导入到您的测试文件中，您也会得到未定义的 React。

解决方法很简单，改成import React, { Component } from 'react';

Answer 3

在测试中导入 React

import React from 'react';

Answer 4

在我的测试文件的最顶部，我放了：

/**

• @jest-environment jsdom */

https://jestjs.io/docs/configuration#testenvironment-string

Answer 5

使用此更新软件包：

npm audit fix

或：

npm audit fix --force

它对我有用，但它可能会破坏您使用的一些旧包？！我不知道。如果您知道，请填写此答案。

Answer 6

编辑：问题肯定与您的 babel 配置有关，react 预设目标浏览器使用 es6 哪个目标节点没有，试试这个

{
    "env": {
        "test": {
            "presets": [ ["env", { "targets": { "node": "current" } }]]
        },
        "development": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        },
        "production": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        }
    }
}

还将它添加到您的webpack.mix.js 以使您了解 node_modules（假设您的组件位于 /modules 目录中）

.webpackConfig({
  resolve: {
    modules: [path.resolve(__dirname, 'resources/assets/js/modules'), 'node_modules']
  }
})

您可以阅读有关如何配置 babel here 的更多信息。