JEST- ReferenceError: React 没有在 .NET MVC 4 应用程序中使用 jest 定义

Question

我是 jest 和 react 的新手，我刚刚安装了所需的包来运行 react。 现在我想向已经创建的 React 组件添加一些测试。 为此，我正在使用 Jest。 当我运行npm run test命令时，按照 jest 的文档，它会引发以下错误：

 D:\Users\rdmello\Documents\linqin_Updated12-2\trunk\WebReporting>npm 
run 
 test

 > react@1.0.0 test D:\Users\rdmello\Documents\linqin_Updated12- 
 2\trunk\WebReporting
 > jest

  FAIL  Scripts/main/ItemViewer/uiComponent.test.js
  ● Test suite failed to run

ReferenceError: React is not defined

  1 | //export Label from './uiComponent';
  2 |
> 3 | class Label extends React.Component {
    |                     ^
  4 |     render() {
  5 |         console.log(this.props);
  6 |         if (this.props.hideName == false) {

  at Object.<anonymous> (Scripts/main/ItemViewer/uiComponents.jsx:3:21)
  at Object.<anonymous> 
   (Scripts/main/ItemViewer/uiComponent.test.js:5:1)

   Test Suites: 1 failed, 1 total
    Tests:       0 total
    Snapshots:   0 total
   Time:        1.424 s
   Ran all test suites.
   npm ERR! code ELIFECYCLE

这是我的 package.json

{
 "name": "react",
 "version": "1.0.0",
 "main": "../",
  "license": "MIT",
 "scripts": {
  "build": "webpack",
  "compile": "babel src --presets react --out-dir static",
  "watch": "babel src --presets react --out-dir static --watch",
  "test": "jest"
 },
 "jest": {
 "transform": {
  "^.+\\.[t|j]sx?$": "babel-jest"
  },
  "moduleFileExtensions": [
   "ts",
   "tsx",
   "js",
   "jsx",
   "json"
   ]
   },
 "dependencies": {
  "babel-types": "^6.26.0",
  "emotion": "^9.2.12",
  "emotion-server": "^9.2.12",
  "react": "^16.8.2",
  "react-dom": "^16.8.2",
  "react-emotion": "^9.2.12",
  "react-helmet": "^6.0.0",
  "react-jss": "^8.6.1",
  "react-router-dom": "^5.0.0",
  "react-select": "^3.0.4",
  "reactstrap": "^8.0.0",
  "styled-components": "^4.0.0"
 },
"devDependencies": {
 "@babel/cli": "^7.16.0",
 "@babel/core": "^7.16.5",
"@babel/plugin-transform-react-jsx": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"babel-jest": "^27.4.5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-export-extensions": "^6.22.0",
"jest": "^27.4.5",
"react-test-renderer": "^17.0.2",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}

}

.babelrc：

{
"presets": [
    "@babel/preset-env",
    [
        "@babel/preset-react",
        { "runtime": "automatic" }
    ]
],
"plugins": [
    "transform-export-extensions",
    "transform-es2015-modules-commonjs",
    "@babel/plugin-transform-react-jsx"
]}

babel.config.json

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

webpack.config.js

const path = require('path');

module.exports = {
entry: '../WebReporting/Scripts/main/ItemViewer/Entry.js',
output: {
    filename: 'webpackMain.js',
    path: path.resolve(__dirname, 'dist'),
},
externals: {
    'react': 'React'
}
};

我的笑话测试

import React from 'react';
//import * as React from 'react';
//import React, { Component } from 'react';
import renderer from 'react-test-renderer';
import Link from '../ItemViewer/uiComponents';

window.React = React


test('Link changes the class when hovered', () => {
const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();

// manually trigger the callback
tree.props.onMouseEnter();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();

// manually trigger the callback
tree.props.onMouseLeave();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

还有我的反应组件：

class Label extends React.Component {
render() {
    console.log(this.props);
    if (this.props.hideName == false) {
        return (
            <label id={this.props.name} className={this.props.classes}>{this.props.name} : 
      {this.props.value}</label>
        );       
    } else {
        return (
            <label id={this.props.name} className={this.props.classes}> {this.props.value} 
          </label>
        );
    }
    }
    }

如您所见，我尝试了所有解决方案，例如以不同方式导入 React，添加 webpack.config.js 并在.babelrc 中添加额外的插件。 但我仍然无法解决这个问题。 有人可以帮忙吗。 谢谢。

Answer 1

你还没有在你的组件所在的文件中导入 React。

只需将此导入语句添加到uiComponents.jsx的顶部：

import React from 'react';