TypeError:无法读取未定义的属性"bool" [英] TypeError: Cannot read property 'bool' of undefined
本文介绍了TypeError:无法读取未定义的属性"bool"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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-bootstrap/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:4:1)
每次运行npm测试时都会收到此错误.
我想要做的只是使App.test.js工作.
我已经将所有依赖项更新为最新的(我无法做到的，除了"axios"，"react-bootstrap"，"react-bootstrap-tpeahead"，"bootstrap"，"react-scripts"). /p>
我还被告知，从React v15及更高版本(我使用16.5.0)中，我必须从"prop-types"而不是"React"导入PropTypes.但是，我添加了这一行
import PropTypes from 'prop-types';
对于每个单个组件和App.js，仍然无法正常工作.
我也有个建议:
似乎是react-boostrap本身中的错误.请检查Transition.js中出现错误的行.我敢打赌它会尝试访问window上的属性.但是window在测试上下文中将不存在-毕竟这只是一个在节点中运行的控制台应用程序."
我不知道这意味着什么，但是我确实对Transition.js有问题(如我得到的错误所示)
如何使此测试有效?我已经阅读了许多解决方案，但没有帮助我...
Package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "^23.6.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.6.0",
"jest": "^23.6.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.5.0",
"react-scripts": "^0.6.1",
"react-test-renderer": "^16.5.0"
},
"dependencies": {
"adal-angular": "^1.0.17",
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"prop-types": "^15.6.2",
"react": "^16.5.0",
"react-bootstrap": "^0.30.10",
"react-bootstrap-typeahead": "^1.4.2",
"react-http-request": "^1.0.4",
"react-overlays": "^0.8.3",
"react-router-dom": "^4.3.1"
},
"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"
},
"transform": {
"\\.js$": "<rootDir>/node_modules/babel-jest"
}
}
.babelrc
{
"presets": ["env", "react"]
}
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';
import PropTypes from 'prop-types';
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="microsoft-gray.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 from 'react';
import PropTypes from 'prop-types';
import {shallow} from 'enzyme';
import CheckboxWithLabel from '../CheckboxWithLabel';
test('CheckboxWithLabel changes the text after click', () => {
const checkbox = shallow(
<CheckboxWithLabel labelOn="On" labelOff="Off" />
);
expect(checkbox.text()).toEqual('Off');
checkbox.find('input').simulate('change');
expect(checkbox.text()).toEqual('On');
});
解决方案
在测试环境中转换模块以实现ES6功能.只需将以下代码添加到您的Jest配置中即可:
"transform": {
"\\.js$": "<rootDir>/node_modules/babel-jest"
},
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-bootstrap/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:4:1)
I get this error everytime I run npm test.
All I want is to make App.test.js work.
I have updated all my dependencies to the latest (besides 'axios', 'react-bootstrap', 'react-bootstrap-tpeahead', 'bootstrap', 'react-scripts', which I couldn't).
I also have been told that from React v15 and up (I use 16.5.0) I have to import PropTypes from 'prop-types' and not from 'React'. However, I added the line
import PropTypes from 'prop-types';
to every single component and to App.js, still does not work.
I also got a suggestion:
"Seems to be an error in react-boostrap itself. Check the line in Transition.js where the error appears. I'll bet it tries to access a property on window. But window won't exist in the test context - it's just a console application running in node after all".
I have no idea what it means but I do have a problem with Transition.js for sure (as the error that I get shows)
How can I make this test work? I have read many solutions but non helped me...
Package.json :
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "^23.6.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.6.0",
"jest": "^23.6.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.5.0",
"react-scripts": "^0.6.1",
"react-test-renderer": "^16.5.0"
},
"dependencies": {
"adal-angular": "^1.0.17",
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"prop-types": "^15.6.2",
"react": "^16.5.0",
"react-bootstrap": "^0.30.10",
"react-bootstrap-typeahead": "^1.4.2",
"react-http-request": "^1.0.4",
"react-overlays": "^0.8.3",
"react-router-dom": "^4.3.1"
},
"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"
},
"transform": {
"\\.js$": "<rootDir>/node_modules/babel-jest"
}
}
.babelrc
{
"presets": ["env", "react"]
}
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';
import PropTypes from 'prop-types';
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="microsoft-gray.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;
The test code:
import React from 'react';
import PropTypes from 'prop-types';
import {shallow} from 'enzyme';
import CheckboxWithLabel from '../CheckboxWithLabel';
test('CheckboxWithLabel changes the text after click', () => {
const checkbox = shallow(
<CheckboxWithLabel labelOn="On" labelOff="Off" />
);
expect(checkbox.text()).toEqual('Off');
checkbox.find('input').simulate('change');
expect(checkbox.text()).toEqual('On');
});
解决方案
Transform your modules for ES6 feature in test environment. Just add this code to your Jest config:
"transform": {
"\\.js$": "<rootDir>/node_modules/babel-jest"
},
这篇关于TypeError:无法读取未定义的属性"bool"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
