gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:10:12 27 4
gpt4 key购买 nike

我正在尝试使用 jestenzyme 进行一些简单的快照测试——移动到 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),
});
}

最佳答案

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

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

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

关于javascript - 由于 ES6/Es.next 语法,Jest 测试崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52486035/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com