Javascript 使用Jest测试组件
一般来说,我不熟悉玩笑和JavaScript。我试图用Jest测试我的java脚本代码 安装Jest和所有其他相关依赖项后,初始App.test.js将失败,并显示以下消息:Javascript 使用Jest测试组件,javascript,reactjs,unit-testing,jestjs,Javascript,Reactjs,Unit Testing,Jestjs,一般来说,我不熟悉玩笑和JavaScript。我试图用Jest测试我的java脚本代码 安装Jest和所有其他相关依赖项后,初始App.test.js将失败,并显示以下消息: FAIL src/App.test.js ● Test suite failed to run TypeError: Cannot read property 'bool' of undefined 2 | import logo from './logo.svg'; 3 | import './App.
FAIL src/App.test.js
● Test suite failed to run
TypeError: Cannot read property 'bool' of undefined
2 | import logo from './logo.svg';
3 | import './App.css';
> 4 | import { Grid, Row, Col, Table, Panel, Image, Tabs, Tab, Nav, NavItem, Alert} from 'react-bootstrap';
| ^
5 | import _ from 'lodash';
6 | import $ from 'jquery';
7 | import Request from 'react-http-request';
at Object.<anonymous> (node_modules/react-overlays/lib/Transition.js:259:33)
at Object.<anonymous> (node_modules/react-bootstrap/lib/Collapse.js:41:19)
at Object.<anonymous> (node_modules/react-bootstrap/lib/index.js:62:18)
at Object.<anonymous> (src/App.js:4:1)
at Object.<anonymous> (src/App.test.js:3:1)
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Grid, Row, Col, Table, Panel, Image, Tabs, Tab, Nav, NavItem, Alert} from 'react-bootstrap';
import _ from 'lodash';
import $ from 'jquery';
import Request from 'react-http-request';
import {AdminViewComponent} from './components/AdminViewComponent.js';
import {WholeScreen} from './components/WholeScreenComponent.js';
class App extends Component {
render() {
var url = "./api/user/" + this.props.userName + "/";
console.log("props = " + JSON.stringify(this.props));
console.log("url = " + url);
var userCompanyIcon;
//if (this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01"){
if (this.props.tid == "72f988bf-86f1-41af-91ab-2d7cd011db47" || this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01"){
userCompanyIcon = <Image className="userCompanyIcon" src="microsoftgray.png" responsive/>;
}
return (
<div className="App">
<div className="App-header">
<Grid>
<Row>
<Col xs={6} sm={6} md={6}>
</Col>
<Col xs={2} sm={2} md={2}>
</Col>
<Col xs={4} sm={4} md={4}>
<div className="Hello">Hello, {this.props.fisrtName} </div>
</Col>
</Row>
<Row>
<Col xs={4} sm={4} md={4} >
{userCompanyIcon}
</Col>
<Col xs={4} sm={4} md={4} >
</Col>
<Col xs={4} sm={4} md={4}>
<Image className="companyIcon" src="MatanTransperent.png" responsive />
</Col>
</Row>
</Grid>
</div>
<div className="App-content">
<Request
url= {url}
method='get'
accept='application/json'
headers={{'Authorization': 'Bearer ' + this.props.token}}
verbose={true}>
{
({error, result, loading}) => {
if (loading) {
return <div>loading...</div>;
} else {
if (result == null || result.statusType == 4 ||result.statusType == 5){
return <div> an unknown error has occured. </div>;
}
else{
var returnObject = JSON.parse(result.text);
if (returnObject.isAdmin == false){
return <WholeScreen data {returnObject.DonationsList}/>;
}
else if (returnObject.isAdmin == true){
return <AdminViewComponent token={this.props.token}/>;
}
}
}
}
}
</Request>-
</div>
</div>
);
}
}
export default App;
import React,{Component}来自'React';
从“/logo.svg”导入徽标;
导入“/App.css”;
从“react bootstrap”导入{网格、行、列、表、面板、图像、选项卡、选项卡、导航、导航项、警报};
从“lodash”进口;
从“jquery”导入美元;
从“react http Request”导入请求;
从“./components/AdminViewComponent.js”导入{AdminViewComponent};
从“./components/批发商组件.js”导入{批发商屏幕};
类应用程序扩展组件{
render(){
var url=“./api/user/”+this.props.userName+“/”;
log(“props=“+JSON.stringify(this.props));
console.log(“url=”+url);
var userCompanyIcon;
//如果(this.props.tid==“49d3d3cf-cde6-4161-8d6d-1789042d7b01”){
如果(this.props.tid==“72f988bf-86f1-41af-91ab-2d7cd011db47”| | this.props.tid==“49d3d3cf-cde6-4161-8d6d-1789042d7b01”){
userCompanyIcon=;
}
返回(
你好,{this.props.firstname}
{userCompanyIcon}
{
({错误,结果,加载})=>{
如果(装载){
返回装载。。。;
}否则{
if(result==null | | result.statusType==4 | | result.statusType==5){
返回发生未知错误;
}
否则{
var returnObject=JSON.parse(result.text);
if(returnObject.isAdmin==false){
回来
}
else if(returnObject.isAdmin==true){
回来
}
}
}
}
}
-
);
}
}
导出默认应用程序;
您面临的问题是:您使用的是能够导入静态文件,在您的情况下是SVG图像。Jest不通过webpack运行JavaScript源代码和测试文件,只通过Babel运行,Babel只支持导入JavaScript模块
Jest文档中解释了如何处理此问题的解决方案:
您必须告诉测试:“好的,如果您遇到一行,我正在导出SVG或其他静态文件,只需导入一个模拟JavaScript模块即可。”
这是通过将其添加到package.json中的Jest配置来完成的:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "^23.4.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.5.1",
"jest": "^23.5.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.4.2",
"react-scripts": "0.6.1",
"react-test-renderer": "^16.4.2"
},
"dependencies": {
"adal-angular": "^1.0.13",
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"jquery": "^3.1.1",
"lodash": "^4.17.10",
"react": "^16.4.2",
"react-bootstrap": "^0.30.5",
"react-bootstrap-typeahead": "^1.2.0",
"react-http-request": "^1.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"description": "This project was bootstrapped with [Create React App (https://github.com/facebookincubator/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC",
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
"resolver": null
}
// package.json
{
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
}
}
}
您可能会遇到的下一个问题是导入CSS文件,您应该使用styleMock
稍微不同地处理这些文件:
// package.json
{
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
您面临的问题是:您使用的是能够导入静态文件,在您的例子中是SVG图像。Jest不通过webpack运行JavaScript源代码和测试文件,只通过Babel运行,Babel只支持导入JavaScript模块 Jest文档中解释了如何处理此问题的解决方案: 您必须告诉测试:“好的,如果您遇到一行,我正在导出SVG或其他静态文件,只需导入一个模拟JavaScript模块即可。” 这是通过将其添加到package.json中的Jest配置来完成的:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "^23.4.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.5.1",
"jest": "^23.5.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.4.2",
"react-scripts": "0.6.1",
"react-test-renderer": "^16.4.2"
},
"dependencies": {
"adal-angular": "^1.0.13",
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"jquery": "^3.1.1",
"lodash": "^4.17.10",
"react": "^16.4.2",
"react-bootstrap": "^0.30.5",
"react-bootstrap-typeahead": "^1.2.0",
"react-http-request": "^1.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"description": "This project was bootstrapped with [Create React App (https://github.com/facebookincubator/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC",
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
"resolver": null
}
// package.json
{
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
}
}
}
您可能会遇到的下一个问题是导入CSS文件,您应该使用styleMock
稍微不同地处理这些文件:
// package.json
{
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
您尚未在babel环境{“预设”中添加react:[“env”,“react”]}好的,谢谢,我照你说的做了,但仍然没有通过测试。我编辑了我的问题,以便你能看到。你还没有安装babel preset Env,谢谢,我刚刚安装了,但仍然没有工作。再次编辑了我的问题,以便你能看到错误。@Patrickhundy你的
.babelrc
文件中有一个打字错误,你正在指定presents
In不要使用预设
。因此,您会看到未知选项
错误。您没有在babel环境{“预设”中添加react:[“env”,“react”]}好的,谢谢,我照你说的做了,但仍然没有通过测试。我编辑了我的问题,以便你能看到。你还没有安装babel preset Env,谢谢,我刚刚安装了,但仍然没有工作。再次编辑了我的问题,以便你能看到错误。@Patrickhundy你的.babelrc
文件中有一个打字错误,你正在指定presents
In不要使用预设
。因此您会看到未知选项
错误。您好!我非常感谢您的帮助:非常感谢!当然,我会看一看。如果这个答案对您有用,接受它如何?您好!我非常感谢您的帮助:非常感谢!当然,我会看一看。如果这个答案对你有用的话,接受它怎么样?