导入 react-bootstrap 组件时测试失败答案

【问题标题】：Test fails on import of react-bootstrap component导入 react-bootstrap 组件时测试失败
【发布时间】：2018-03-18 20:51:45
【问题描述】：

我正在尝试测试一些使用 react-bootstrap 的 React 组件。

由于某种原因，来自 react-bootstrap 的组件的导入将失败并出现以下错误：

FAIL test\App.test.js
  ● Test suite failed to run

    C:\Users\AbfalterJakob\Documents\projects\koreanbuildsoverwolf2\node_modules\react-bootstrap\es\DropdownButton.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      2 | import React from "react";
      3 | import "./LoginComponent.css";
    > 4 | import DropdownButton from "react-bootstrap/es/DropdownButton";
      5 | import MenuItem from "react-bootstrap/es/MenuItem";
      6 | import BackendFactory from "../../util/BackendFactory";
      7 | import GlobalState from "../../GlobalState";

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/subcomponents/LoginComponent.jsx:4:23)
      at Object.<anonymous> (src/components/IndexComponent.jsx:6:23)

我用 mocha 和 jest 都试过了，都导致相同的错误消息。

我的 Jest 配置是：

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/test/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/test/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]

【问题讨论】：

遇到类似错误。你找到解决办法了吗？
我改变了我的设置。我现在在 puppeteer headless chrome 中运行我的测试，并以编程方式启动 webpack 开发服务器以进行测试。它工作得很好，我还设法通过滥用 localStorage 进行了一些模拟。

标签： reactjs mocha.js jestjs

【解决方案1】：

尝试添加 jest.disableAutomock();

【讨论】：