Jest 测试因 ES6/Es.next 语法而崩溃答案

【问题标题】：Jest tests crashing due to ES6/Es.next SyntaxJest 测试因 ES6/Es.next 语法而崩溃
【发布时间】：2019-02-28 08:39:46
【问题描述】：

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

当我运行测试时，输出包含许多指向 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),
  });
}

【问题讨论】：

没有 ES7。你指的是ES.next。 我的假设是我错过了 babel-jest。我已按照说明进行设置，但我仍然收到来自不同组件的许多错误，这些错误涉及缺少 babel 转换。 - 问题不包含有关设置的足够数据，但 "plugins": ["transform-class-properties"]不需要，因为它已被 stage-1 覆盖。
@estus 这也是我的想法，鉴于文档......但如果“transform-class-properties”不包括在内，它将不会运行，因为它会阻塞我的问题中发布的错误.
问题是特定于您的设置。它应该单独运行stage-1，类字段是第 3 阶段提案。尝试为初学者重新安装 node_modules。目前还不清楚你在说什么错误。 Missing class properties transform 这个有没有transform-class-properties？
那是转换类属性。 :\

标签： javascript reactjs babeljs jestjs babel-jest

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我的同事发现了这个问题，其中一个明显的问题正盯着我的脸……

transform-class-properties 在我的 .babelrc 中的测试环境配置中的插件中丢失。

我进行了以下更改，现在它可以正常工作了。

.babelrc：

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

【讨论】：