javascript - 使用 Jest 测试组件

Question

总的来说，我是 Jest 和 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.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)

我的问题是我怎样才能通过这个测试？

我知道当这是我的 package.json 时这个测试应该成功通过:

{
  "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
  }

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




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;

Answer 1

您面临的问题是:您正在使用 webpack能够导入静态文件，在您的情况下，是 SVG 图像。 Jest 不通过 webpack 运行 JavaScript 源代码和测试文件，仅通过 Babel 运行，Babel 仅支持导入 JavaScript 模块。

Jest 文档中解释了如何处理此问题的解决方案:https://jestjs.io/docs/en/webpack#handling-static-assets

你必须告诉测试:“好的，如果你遇到我正在导出 SVG 或其他静态文件的行，只需导入一个模拟 JavaScript 模块即可。”

这是通过将其添加到 package.json 中的 Jest 配置中来完成的:

// 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"
    }
  }
}

...然后在项目的根目录中创建一个目录 __mocks__ 并将此文件 fileMock.js 放在那里:

// __mocks__/fileMock.js
module.exports = 'test-file-stub';

您可能会遇到的下一个问题是导入 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"
    }
  }
}

模拟文件:

// __mocks__/styleMock.js
module.exports = {};