javascript - 由于 ES6/Es.next 语法，Jest 测试崩溃

Question

我正在尝试使用 jest 和 enzyme 进行一些简单的快照测试——移动到 react-testing-library——一些 react 我正在构建的组件。

当我运行测试时，输出包含许多指向 ES6/7 类属性的错误。

我的假设是我缺少 babel-jest。我已按照说明进行设置，但我仍然收到来自不同组件的一些错误，这些错误指的是缺少 babel 转换...

见下文:

示例测试:

import React from 'react';
import { render } from 'react-testing-library';
import HRWrapper from '.';

test('<HRWrapper> snapshot', () => {
  const { container } = render(<HRWrapper>P.Body AaBbCc</HRWrapper>);
  expect(container.firstChild).toMatchSnapshot();
});

示例错误:

  ● Test suite failed to run

.../packages/Tooltip/src/index.js: Missing class properties transform.

    126 |
    127 | class ToolTip extends React.Component {
  > 128 |   state = {
        |   ^
    129 |     active: false,
    130 |     style: {}
    131 |   }

这是我的配置:

package.json:

{
...
  "scripts": {
    "postinstall": "npm run bootstrap",
    "bootstrap": "lerna bootstrap",
    "build": "lerna exec -- node ../../scripts/build.js",
    "clean": "lerna clean",
    "predev": "npm run alias",
    "dev": "NODE_ENV=development start-storybook -p 9001 -c .storybook",
    "docs": "for f in packages/*; do react-doc-generator $f/src -o $f/docs/README.md -e [*.story.js]; done",
    "publish": "lerna --no-verify-registry publish",
    "start": "npm run dev",
    "test": "jest --json --outputFile=.jest-test-results.json",
    "test:update": "jest --updateSnapshot",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "lint": "eslint .",
    "fix": "eslint --fix",
    "alias": "node scripts/alias.js"
  },
  "repository": {
    "type": "git",
    ...

.babelrc:

{
  "presets": [
    "stage-1",
    "react",
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["transform-class-properties"],
  "env": {
    "test": {
      "presets": ["env", "react"],
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

jest.config.js:

module.exports = {
  "setupTestFrameworkScriptFile": "<rootDir>/config/setup-test.js",
  "moduleNameMapper": {
    [`@myLibrary/(.*)$`]: "<rootDir>/packages/$1/src"
  },
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  },
};

setup-test.js:

// this is the jest setupTestFrameworkScriptFile

/*
* use mocked classNames instead of unique hashed className generated by
* styled-components for snapshot testing
*/

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import 'jest-styled-components';

configure({ adapter: new Adapter() });

// here we set up a fake localStorage because jsdom doesn't support it
// https://github.com/tmpvar/jsdom/issues/1137
if (!window.localStorage) {
  window.localStorage = {};
  Object.assign(window.localStorage, {
    removeItem: function removeItem(key) {
      delete this[key];
    }.bind(window.localStorage),
    setItem: function setItem(key, val) {
      this[key] = String(val);
    }.bind(window.localStorage),
    getItem: function getItem(key) {
      return this[key];
    }.bind(window.localStorage),
  });
}

Answer 1

您可能还需要 stage-2 或 stage-0。

参见:https://github.com/tc39/proposals

另请记住，插件在预设之前应用，并且预设按从后到先的顺序应用。