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

未完待续~~~

github地址