web前端测试框架

通用前端js测试框架

Mocha

Mocha 是一种可用于nodejs和浏览器测试的简单的，灵活的测试框架。（提供TDD, BDD, Qunit风格的写法）

安装

  $ npm install -g mocha

  $ npm install expect

开始使用

在目录下新建测试文件

sample1.spec.js

var expect = require('expect');

describe('Array', function(){
   describe('indexOf()', function(){
     it('查找的值不在数组中应该返回 -1', function(){
         expect([1, 2, 3].indexOf(8)).toBe(-1);
     })
   })
})

回到test所在目录，执行：

$ mocha


  Array
    indexOf()
      ✓ 查找的值不在数组中应该返回 -1


  1 passing (17ms)

稍作改动，改成ES6写法：

import expect from 'expect';

describe('Array', () => {
    describe('indexOf()', () => {
        it('查找的值不在数组中应该返回 -1', () => {
            expect([1, 2, 3].indexOf(8)).toBe(-1);
        })
    })
})

执行，得到结果：

$ mocha
/Users/guopeng/disk/nodes/test-sample/public/test/sample2.spec.js:8
import expect from 'expect';
^^^^^^

SyntaxError: Unexpected reserved word

错误：import不是有效的保留字，说明mocha不认识ES6的语法

使Mocha可以测试ES6代码

如果用mocha测试ES6写的代码，在测试之前需要先进行Babel转码先安装依赖包：

babel-core
babel-preset-es2015

在根目录下创建文件：

.babelrc

内容：

{
  "presets": [ "es2015" ]
}

然后使用--compilers参数指定测试脚本的转码器

$ mocha --compilers js:babel-core/register

上面命令需要mocha和babel-core都装在全局中，如果只是局部的使用：

$ ../node_modules/mocha/bin/mocha --compilers js:babel-core/register

React Components测试

React组件同样需要Babel转码，安装依赖项：

react
babel-preset-react

修改.babelrc的配置项

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

以上只是对jsx语法进行了转码， React 虚拟Dom的特性可以允许我们在不需要浏览器的环境下进行测试，我们只需要对 React 浅渲染的结构进行测试即可认为能够正常渲染。

利用浅渲染需要先安装 React Test Utilities

npm install --save-dev react-addons-test-utils

示例

import React, { Component } from 'react';

class Card extends Component {

    render() {
        return (
            <div className="container">
                <h1>搜索链接</h1>
                <a href="www.baidu.com">百度</a>
            </div>
        )
    }

}

export default Card;

可以这样测：

import expect from 'expect'
import React from 'react';
import TestUtils from 'react-addons-test-utils'

import Card from '../src/Card'

describe('Card Components', () => {

    let renderer = TestUtils.createRenderer()
    renderer.render(<Card />)
    let output = renderer.getRenderOutput();

    it('应该正确的渲染', () => {
        expect(output.props.className).toBe('container');

        let [h1, a] = output.props.children;
        expect(h1.type).toBe('h1');
        expect(h1.props.children).toBe('搜索链接')

        expect(a.props.href).toBe('www.baidu.com');
    })

})

我们看下output是个什么东西：

{ '$$typeof': Symbol(react.element),
  type: 'div',
  key: null,
  ref: null,
  props: { className: 'container', children: [ [Object], [Object] ] },
  _owner: null,
  _store: {} }

mocha命令行参数

--compilers <ext>:<module>,... 指定给定的module(s)来编译文件，如：mocha --compilers js:babel-core/register ,表示在测试之前先用babel-core/register模块处理一下.js文件
--require <name> 加载指定的module
--recursive 运行mocha命令时，默认只执行test目录下的第一层文件，再深层次的子目录不会执行，如果执行这些深层次目录的用例，只需指定recursive即可