[英]Jest fails to run when node modules have es6 syntax (create-react-app)
I have a create-react-app
project and trying to unit test office-ui-fabric-react
component using Jest
and Enzyme
. 我有一个
create-react-app
项目,并尝试使用Jest
和Enzyme
office-ui-fabric-react
组件进行单元测试。
The latest version of office-ui-fabric-react
use es6
syntax and jest
is failing to run the test. 最新版本的
office-ui-fabric-react
使用es6
语法,并且jest
无法运行测试。
import { mount } from "enzyme";
import React from "react";
import { MessageBar, MessageBarType } from "office-ui-fabric-react/lib/MessageBar";
describe("<MessageBar />", () => {
it("renders message bar correctly", () => {
const wrapper = mount(<MessageBar messageBarType={MessageBarType.success} />);
expect(wrapper.find('.ms-MessageBar--success').length).toEqual(1);
});
});
This is the package.json file coming from create-react-app
with few additions 这是来自
create-react-app
的package.json文件,几乎没有添加
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"office-ui-fabric-react": "^6.110.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"devDependencies": {
"@types/enzyme": "3.1.5",
"@types/enzyme-adapter-react-16": "1.0.1",
"@types/jest": "23.0.0",
"@types/react": "16.3.16",
"@types/react-dom": "16.0.5",
"@types/react-test-renderer": "^16.0.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"jest": "^23.6.0"
}
}
create-react-app
is not allowing me to specify ani options for jest
in package.json
without ejecting. create-react-app
不允许我在package.json
为jest
指定ani选项而不弹出。
After looking at the suggestions in the comments above, the following set worked for me: 在查看了以上评论中的建议之后,以下设置对我有用:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"office-ui-fabric-react": "^6.110.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"jest": "^23.6.0"
}
}
In my test file sample-tests.jsx
在我的测试文件
sample-tests.jsx
import Enzyme from "enzyme";
import { mount } from "enzyme";
import React from "react";
import { MessageBar, MessageBarType } from "office-ui-fabric-react/lib-commonjs/MessageBar";
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
describe("<MessageBar />", () => {
it("renders message bar correctly", () => {
const wrapper = mount(<MessageBar messageBarType={MessageBarType.success} />);
expect(wrapper.find('.ms-MessageBar--success').length).toEqual(1);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.