代码之家 › 专栏 › 技术社区 › Jeffpowrs

由于ES6/Es.next语法,Jest测试崩溃

babel-jest jestjs babeljs reactjs javascript

0

Jeffpowrs · 技术社区 · 6 年前

我试着做一些简单的快照测试 开玩笑 和 反应测试库 对于我正在构建的一些组件。

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

巴别尔笑话 . 我已经按照指示设置,但我仍然收到了来自不同组件的一些错误,指的是缺少巴贝尔变换。。。

示例测试 :

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 |   }

以下是我的配置:

:

{
...
  "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",
    ...

:

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

:

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

安装测试.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),
  });
}

2 回复 | 直到 6 年前

1

Magnum 6 年前

你可能还需要 stage-2 或 stage-0 .

https://github.com/tc39/proposals

还要记住,插件是在预置之前应用的,预置是按照从最后到第一的顺序应用的。

2

0

Jeffpowrs 6 年前

transform-class-properties 在我的测试环境配置中的插件中缺少 巴别塔

我做了以下修改,现在可以正常工作了。

巴别塔 :

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