ReferenceError：测试中未定义 React

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 导入到测试文件中，你也会得到未定义的结果。

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