React测试环境搭建

​ 测试是软件开发中的重要一环，它的根本目的是为了提高代码质量，对于用户的特定需求，通过测试来保证test case覆盖到的场景是正确无误的。随着React在近几年的大红大紫，针对React项目的测试也成了前端工程师需要掌握的。以下记录我在实际工作中基于React项目的测试环境搭建。

mocha & chai

​ mocha是一个可以运行在node.js和浏览器上的前端测试框架，允许配合任意的断言库进行使用，比如node.js中内置的assert模块、char、should.js、expect.js等。

​ chai是一个BDD(Behavior Drive Development, 行为驱动开发)/TDD(Test Drive Development, 测试驱动开发)类型的断言库，可以和任意的前端测试框架进行配合使用。

​ 首先在项目中安装mocha和chai的npm包npm install -save-dev mocha chai，编写测试用例：

// ./src/scripts/add.js
function add(x, y) {
  return x + y;
}
module.exports = add;

// ./test/add.test.js
var add = require('../src/scripts/add.js');
var expect = require('chai').expect;

describe('plus test', function() {
  it('1+1 === 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  })
})

支持ES6语法的测试

​ 如果代码中使用了ES6语法，如下方模块的引入使用了ES6中的import，则需要在运行test case前进行ES6的转码。

import add from '../src/scripts/add';
import { expect } from 'chai';

describe('plus test', function() {
  it('1+1 === 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  })
})

1. 安装babel：npm install babel-core babel-preset-es2015 --save-dev

2. 配置.babelrc:

   {
     "presets": [ "es2015" ]
   }
   

   ​运行测试是添加--compiler参数：./node_modules/mocha/bin/mocha --compilers js:babel-core/register

支持react的测试

​ enzyme是Airbnb公司推出的React测试工具，相比于facebook官方的测试工具，enzyme借鉴了jQuery的DOM API，使用起来非常容易。编写如下的测试用例：

import React from 'react';
import { shallow, render } from 'enzyme';
import { expect } from 'chai';
import App from '../src/scripts/App';

describe('Enzyme shallow', () => {
  it('App', () => {
    let app = shallow();
    expect(app.find('h1').text()).to.equal('Todos');
  });
});

​ 为了使mocha能够理解React组件，需要安装一些npm包：

1. npm install -save-dev enzyme

2. npm install babel-preset-react --save-dev

3. .babelrc中：

   {
     "presets": [ "es2015", "react" ]
   }
   

4. npm i --save-dev react-test-renderer react-dom

package.json中集成mocha命令

{
  "scripts": {
    "test": "mocha --compilers js:babel-core/register"
  },
}

总结

​ 从前端开发人员的岗位职责来讲，测试看起来并不属于前端本质工作，同时编写和维护测试用例也会花费大量的时间。所以是否应该做前端测试就变成了投入和产出是否成正比的问题。基于TDD模式的开发有以下的好处：

• 在产品发布前跑一遍测试用例，杜绝特定场景下的bug
• 基于Karma.js的自动化测试代替了人工手动点击的操作，大大提升效率

在前端技术快速发展的今天，前端项目不再像当年的刀耕火种一般，越来越多的软件工程经验被集成到前端项目中，前端项目正向工程化、流程化、自动化方向高速奔跑。还有更多优秀的提升开发效率、保证开发质量的自动化方案亟待我们挖掘。

待续

Karma.js

参考

React 测试入门教程