IT技术 - 类型错误：无法读取未定义的属性“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 test 时都会出现此错误。

我想要的只是让 App.test.js 工作。

我已将所有依赖项更新为最新版本（除了 'axios'、'react-bootstrap'、'react-bootstrap-tpeahead'、'bootstrap'、'react-scripts'，我不能）。

我还被告知从 React v15 及更高版本（我使用 16.5.0）我必须从“prop-types”而不是从“React”导入 PropTypes。但是，我添加了该行

import PropTypes from 'prop-types';

对于每个组件和 App.js，仍然无法正常工作。

我也得到了一个建议：

“似乎是 react-boostrap 本身的错误。检查 Transition.js 中出现错误的行。我敢打赌，它会尝试访问窗口上的属性。但测试上下文中不存在窗口 - 它只是毕竟是在节点中运行的控制台应用程序”。

我不知道这意味着什么，但我确实对 Transition.js 有问题（正如我得到的错误所示）

我怎样才能使这个测试工作？我已经阅读了很多解决方案，但没有帮助我...

包.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"]
}

应用程序.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');
});