Question

我正在使用laravel混合，如果我正确地解释了这个问题，看来我无法开玩笑地找到反应。

我的测试：

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，它将在浏览器中工作并呈现。但是，当您开玩笑地进行测试时，即使将其导入到测试文件中，也会得到React的未定义。

解决方案很简单，将其更改为import React, { Component } from 'react';

Answer 3

在测试中导入React

import React from 'react';

Answer 4

编辑：问题肯定与您的babel配置有关，react预设使用es6定位浏览器，这是因为est定位的不是目标节点，请尝试

{
    "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的更多信息。

ReferenceError：测试中未定义React

4 个答案: