reactjs - 如何调试 React jest enzyme 测试用例

Question

当我尝试在终端中调试 Rect Jest enzyme 测试用例时，出现以下错误并因此陷入困境。

我使用 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 配置

"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 中更改“test”-->“dev”后，上述错误消失，但出现另一个错误:

“Jest 遇到意外 token ” atshallow();

Answer 1

尝试使用这个.babel配置:

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

应该对你有帮助。