如何调试React Jest酶测试用例

时间:2018-11-19 10:13:41

标签: reactjs jestjs enzyme

当尝试在终端中调试Rect Jest酶测试用例时,出现以下错误并因此而被卡住。

我使用create-react-app创建了该应用,以下是我的配置:

.babelrc

{
  "env": {
    "test": {
      "sourceMaps": "inline",
      "presets": ["es2015", "react-app"],
      "plugins": ["transform-export-extensions"],
      "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
    }
  }
}

来自 package.json

的最佳配置
"jest": {
    "testMatch": [
      "**/src/**/?(*.)(spec|test).js?(x)"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleFileExetnsions": [
      "ts",
      "txx",
      "js",
      "json"
    ],
    "transform": {
      "^.+\\.jsx$": "babel-jest",
      "^.+\\.js$": "babel-jest"
    }
}

测试用例:

import { shallow } from 'enzyme';
import App from './App';
describe('App', () => {
  it('should render app', () => {

    const component = shallow(<App />);

    expect(component).toMatchSnapshot();
  });
});

出现以下错误:

Test suite failed to run

    ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)

编辑:

在.babelrc中更改“测试”->“开发”后,上述错误消失了,但又得到另一个错误:

“浅笑(在应用程序调试中>>);

1 个答案:

答案 0 :(得分:0)

尝试使用此.babel配置:

{
   "presets": ["es2015", "react-app"],
   "plugins": ["transform-export-extensions"],
   "only": [
     "./**/*.js",
     "node_modules/jest-runtime"
   ]
}

它应该可以帮助您。