Question

我对Jest和JavaScript还是陌生的。我正在尝试用Jest测试我的Java脚本代码。

安装Jest和所有其他依赖项之后，初始App.test.js将失败，并显示以下消息：

paste0(
  substring(a, 1, 1),
  unlist(lapply(seq_len(nchar(a) - 1), fun, string = substring(a, 2)))
)

我的问题是我该如何通过考试？

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

[1] "EXET" "ECXT" "ECEX" "EXXT" "EXEX" "ECXX" "EXXX"

.babelrc

 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

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

Answer 1

您面临的问题是：您正在使用webpack来导入静态文件（例如SVG图像）。 Jest不会通过webpack来运行JavaScript源并测试文件，而不会通过仅支持导入JavaScript模块的Babel来运行。

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来处理CSS文件：

// 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 = {};

用Jest测试组件

1 个答案: