Сбои Jest тестов из-за синтаксиса ES6 / Es.next - PullRequest
Новая
       40

Сбои Jest тестов из-за синтаксиса ES6 / Es.next

0 голосов
/ 24 сентября 2018

Я пытаюсь провести простое тестирование моментальных снимков с jest и энзимом - перемещением в библиотеку реагирования-тестирования - для некоторых реагирующих компонентов, которые яЯ строю.

Когда я запускаю свои тесты, вывод содержит ряд ошибок, указывающих на свойства класса 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),
  });
}

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Мой коллега заметил проблему, один из тех очевидных, которые смотрели мне в глаза ...

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"]
    }
  }
0 голосов
/ 25 сентября 2018

Возможно, вам также понадобятся stage-2 или stage-0.

См .: https://github.com/tc39/proposals

Также помните, что плагины применяются ДО пресетов, а пресеты применяются в порядке от последнего к первому.

...