JEST-ReferenceError:React不是在.NET MVC 4应用程序中使用JEST定义的

Question

我是个新手，刚安装了运行react所需的软件包。现在我想为已经创建的React组件添加一些测试。为此，我使用了Jest。根据jest的文档，当我运行npm run test命令时，它会抛出以下错误：

D:UsersrdmelloDocumentslinqin_Updated12-2trunkWebReporting>npm 
run 
test
> react@1.0.0 test D:UsersrdmelloDocumentslinqin_Updated12- 
2trunkWebReporting
> 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

这是我的包.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'
}
};

我的Jest测试

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();
});

我的React组件：

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';