react-natice单元测试
基于 Jest + Enzyme 的 React 单元测试
Jest、Enzyme 介绍
Jest 是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript 单元测试工具。提供了包括内置的测试环境 DOM API 支持、断言库、Mock 库等，还包含了 Spapshot Testing、 Instant Feedback 等特性。
Airbnb开源的 React 测试类库 Enzyme 提供了一套简洁强大的 API，并通过 jQuery 风格的方式进行DOM 处理，开发体验十分友好。不仅在开源社区有超高人气，同时也获得了React 官方的推荐
环境搭建
安装 Jest ,Enzyme ,babel-jest
npm install jest enzyme babel-jest --save-dev
同时在devDependencies中添加相关依赖
"devDependencies": {
"babel-jest": "23.6.0",
"babel-preset-react-native": "4.0.1",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.7.0",
"jest": "23.6.0",
"jest-cli": "^23.6.0",
"react-dom": "16.4.1",
"react-test-renderer": "16.4.1"
}
增加完依赖包之后，需要在package.json中新增属性，配置 Jest：
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
".*\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"transform": {
"^.+\\.js$": "babel-jest"
}
},
同时，新增test scripts
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --inline --progress --colors --port 3000 --host 0.0.0.0 ",
"test": "jest __test__ --env=jsdom"
}
更多配置参考：Jest Configuration
编写测试脚本
在项目跟目录下创建文件夹__test__
在项目中创建被测试的文件TestDemo.js
/**
* desc:
* Created by Rommel on 2018/11/28.
*/
import React, {PureComponent} from 'react';
import {
View,
Text
} from 'react-native';
export default class TestDemo extends PureComponent {
render() {
return (
<View style={{backgroundColor: '#ddd', height: 100}}>
<Text style={{fontSize: 30}}>{this.props.title}</Text>
<Text style={{fontSize: 15}}>{this.props.text}</Text>
</View>
);
}
}
在__test__中创建测试文件TextDemo.spec.js
/**
* Created by Rommel on 2018/11/28.
*/
import 'react-native';
import React from 'react';
import {mount} from "enzyme";
import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import TestDemo from "../../src/jest/TestDemo";
configure({adapter: new Adapter()});
test('PostArea renders correctly', () => {
const wrapper = mount(<TestDemo/>)
expect(wrapper.find(('text')).exists());
});
运行测试
运行看看测试的效果。在 Terminal 中输入 npm run test,效果如下:
test.png
未完待续~~~
