I have a create-react-app
project and trying to unit test office-ui-fabric-react
component using Jest
and Enzyme
.
The latest version of office-ui-fabric-react
use es6
syntax and jest
is failing to run the test.
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
{
"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.
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
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);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.