自动化测试之前端js单元测试框架jest

2017-05-09 本文已影响1788人糖小工

大多数开发者都知道需要写单元测试，但是不知道每个单元测试应用的主要内容以及如何做单元测试，在介绍jest测试框架前，我们先来了解下一些测试相关的概念。

为什么需要单元测试？

保证质量：随着迭代的过程，开发人员很难记清所有的功能点，功能点的新增和删除在代码改变后，进行回归测试时，依靠人工QA很容易出错遗漏。
自动化：通过编写测试用例，只需要编写一次，多次运行，同样的事情不需要从头再来测一遍,很多时候QA的工作量就是这么增加的，新的版本上线，人工QA都需要所有的功能点从新测试一遍。
特性文档：单元测试可以作为描述和记录代码所实现的所有需求，有时候可以作为文档来使用，了解一个项目可以通过阅读测试用例比看需求文档更清晰。
驱动开发，指导设计：代码被测试的前提是代码本身的可测试性，那么要保证代码的可测试性，就需要在开发中注意API的设计，TDD将测试前移就是起到这么一个作用

测试类型

你可能接触过各种测试框架、大体上，最重要测试类型有：

单元测试- 依靠模拟输入证实是否是期望的输出来分别的测试函数或者类。
集成测试 - 测试若干模块来确保他们像预期的那样工作。
功能测试- 在产品本身（例如在浏览器上）对一个场景进行操作，而不考虑内部结构以确保预期的行为。

测试工具类型

测试工具可以分为以下功能，有些提供一个功能，有些提供了一个组合。
使用工具组合是很常见的，即使你可以使用单一的工具实现同样的功能，是所有组合可以获得更灵活的功能。

测试环境（Mocha , Jasmine, Jest, Karma）
测试结构（Mocha , Jasmine, Jest, Cucumber）
断言函数（Chai, Jasmine, Jest, Unexpected）
生成,显示、监听测试结果（Mocha , Jasmine, Jest Karma）
生成,比较组件和数据结构的快照，以确保之前运行的更改是预期的。（Jest,Ava）
mocks。(sinon.js) 目前使用最多的mock库，将其分为spies、stub、fake XMLHttpRequest、Fake server、Fake time几种，根据不同的场景进行选择。
生成代码覆盖率报告。（Istanbul, Jest）
浏览器或者类浏览器环境执行控制。（Protractor , Nightwatch, Phantom, Casper）

单元测试技术的实现原理

测试框架：判断内部是否存在异常，存在则console出对应的text信息
断言库：当actual值与expect值不一样时，就抛出异常，供外部测试框架检测到，这就是为什么有些测试框架可以自由选择断言库的原因，只要可以抛出异常，外部测试框架就可以工作。
mock函数：创建一个新的函数，用这个函数来取代原来的函数，同时在这个新函数上添加一些额外的属性，例如called、calledWithArguments等信息


function describe (text, fn) {
    try {
        fn.apply(...);
    } catch(e) {
        assert(text)
    }
}
function fn () {
    while (...) {
        beforeEach();
        it(text, function () {
            assert();
        });
        afterEach();
    }
}
function it(text, fn) {
  ...
  fn(text)
  ...
}
function assert (expect, actual) {
    if (expect not equla actual ) {
        throw new Error(text);
    }
}

function fn () {
  ...
}

function spy(cb) {
  var proxy = function () {
    ...
  }
  proxy.called = false;
  proxy.returnValue = '...';
  ...
  return proxy;
}

var proxy = spy(fn); // 得到一个mock函数

测试用例的钩子

describe块之中，提供测试用例的四个钩子：before()、after()、beforeEach()和afterEach()。它们会在指定时间执行。

describe('hooks', function() {

  before(function() {
    // 在本区块的所有测试用例之前执行
  });

  after(function() {
    // 在本区块的所有测试用例之后执行
  });

  beforeEach(function() {
  // 在本区块的每个测试用例之前执行
    this.closeFunc = sinon.stub();
    this.Modal = TestUtils.renderIntoDocument(
      <Modal title="whatever" handleClose={this.closeFunc}>
        <div className="m-content">
          <p className="m-text">Just some noddy content</p>
          <a href="#" className="other-link">Click me</a>
        </div>
      </Modal>
    );
    this.eventStub = {
      preventDefault: sinon.stub(),
      stopPropagation: sinon.stub(),
    };
  });

  afterEach(function() {
    // 在本区块的每个测试用例之后执行
  });

  // test cases
  
  it('should have a title', function() {
    var title = helpers.findByTag(this.Modal, 'h2');
    assert.equal(findDOMNode(title).firstChild.nodeValue, 'whatever');
  });

  it('should have child content', function() {
    var content = helpers.findByClass(this.Modal, 'm-content');
    assert.equal(findDOMNode(content).nodeName.toLowerCase(), 'div');
  });

  it('should have child paragraph', function() {
    var text = helpers.findByClass(this.Modal, 'm-text');
    assert.equal(findDOMNode(text).firstChild.nodeValue,
                 'Just some noddy content');
  });


});

如何写单元测试用例

一些好的建议：

只考虑测试，不考虑内部实现
不要做无谓的断言
让每个单元测试保持独立
所有的方法都应该写单元测试
充分考虑数据的边界条件
对重点、复杂、核心代码，重点测试
利用AOP(beforeEach、afterEach),减少测试代码数量，避免无用功能
使用最合适的断言方式

TDD
一句话简单来说，就是先写测试，后写功能实现。TDD的目的是通过测试用例来指引实际的功能开发，让开发人员首先站在全局的视角来看待需求。具体定义可以查看维基;

BDD
行为驱动开发要求更多人员参与到软件的开发中来，鼓励开发者、QA、相关业务人员相互协作。BDD是由商业价值来驱动，通过用户接口(例如GUI)理解应用程序。详见维基.
<blockquote>

Jest介绍--Painless JavaScript Testing

Jest 是一款 Facebook 开源的 JS 单元测试框架，目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。

Jest功能：

内置Jasmin语法
内置auto mock
自带mock API
前端友好（集成JSDOM）
支持直接使用Promise和async/await书写异步代码
支持对 React 组件进行快照监控
扩展和集成 Babel 等常用工具集也很方便
自动环境隔离

Jest用法

安装：

npm install --save-dev jest

package.json中添加：

{
  "scripts": {
    "test": "jest"
  }
}

运行 npm test

也可通过命令行运行：
jest my-test --notify --config=config.json

附加配置

npm install --save-dev babel-jest regenerator-runtime

项目根目录添加.babelrc文件

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

Jest自动定义 NODE_ENV = test

测试脚本的写法

下面是一个加法模块add.js
的代码。

// add.js
function add(x, y) {
  return x + y;
}

module.exports = add;

要测试这个加法模块是否正确，就要写测试脚本。
通常，测试脚本与所要测试的源码脚本同名，但是后缀名为.test.js
（表示测试）或者.spec.js
（表示规格）。比如，add.js
的测试脚本名字就是add.test.js
。

import add from '../src/add'
describe('加法函数测试', () => {
    it('1加2应该等于3', () => {
        expect(add(1, 2)).toBe(3);
    });
});

测试脚本里面应该包括一个或多个describe块，每个describe块应该包括一个或多个it块。
describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。
it块称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称（"1 加 1 应该等于 2"），第二个参数是一个实际执行的函数。

断言库的用法

  expect(add(1, 2)).toBe(3);

所谓"断言"，就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。上面这句断言的意思是，调用add(1, 1)，结果应该等于2。

所有的测试用例（it块）都应该含有一句或多句的断言。它是编写测试用例的关键。断言功能由断言库来实现

简单测试

// add.js
function add(a, b) {
    return a + b;
}
module.exports = add;

// add.test.js
import add from '../src/add'
describe('加法函数测试', () => {
    it('1加2应该等于3', () => {
        expect(add(1, 2)).toBe(3);
    });
});

异步的单元测试

// user.js
import request from './request';
export function getUserName(userID) {
  return request('/users/' + userID).then(user => user.name);
}

// user.test.js

import  * as user from 'user';
// 普通回调
it('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }
  fetchData(callback);
});

// 方法需要返回一个promise对象
it('works with promises',() => {
  return user.getUserName(5)
      .then(name => expect(name).toEqual('Paul'));
});

// async/await
it('works with async/await', async () => {
  const userName = await user.getUserName(4);
  expect(userName).toEqual('Mark');
})

React组件的单元测试

// CheckboxWidthLabel.js
import React from 'react';

export default class CheckboxWithLabel extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isChecked: false };
        this.onChange = this.onChange.bind(this);
    }

    onChange() {
        this.setState({ isChecked: !this.state.isChecked });
    }

    render() {
        return (
            <label >
                <input 
                type = "checkbox"
                checked = { this.state.isChecked }
                onChange = { this.onChange }
                /> 
                { this.state.isChecked ? this.props.labelOn : this.props.labelOff }
            </label >
        )
    }
}

//CheckboxWithLabel-test.js

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import CheckboxWidthLabel from 'CheckboxWithLabel';

it('CheckboxWithlabel changes the text after click', () => {
    const checkbox = TestUtils.renderIntoDocument( <
        CheckboxWidthLabel labelOn = "On"
        labelOff = "Off" / >
    );
    const checkboxNode = ReactDOM.findDOMNode(checkbox);
    expect(checkboxNode.textContent).toEqual('Off');
    TestUtils.Simulate.change(
        TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input')
    )
    expect(checkboxNode.textContent).toEqual('On');
})

手动mock

Paste_Image.png

__ _ _ mocks __ _ _/fetch.js

const actions = {
  "GetAnnounce":{data:["公告公告公告","公告2公告2公告2"]}
}
export default function fetch(params){
  return new Promise((resolve, reject) => {
    const actionType = arams.url.substr('/common/'.length)
    const res = actions[actionType];
      process.nextTick(
        () => res ? resolve(res) : reject({
          error: 'action with ' + actionType + ' not found.',
        })
      );
  })
}

fetch.js


import fetch from './fetch'
export function fetchNotice(params){
  return fetch({
    url:'/common/GetAnnounce',
    params:params|{}
  }).then(annouce => annouce)
}
export function getAllNotice(params){
  return params || {}
}

annouce.js

import fetch from './fetch'
export function fetchNotice(params){
  return fetch({
    url:'/common/GetAnnounce',
    params:params|{}
  }).then(annouce => annouce)
}
export function getAllNotice(params){
  return params || {}
}

annouce.test.js

jest.mock('services/fetch')
import {fetchNotice} from 'services/annouce'

describe('annouce',() => {
  describe('获取公告列表', () => {
      it('正确返回公告数组',  () => {
        // expect([1,2]).toEqual([1,2])
      return fetchNotice().then(res => expect(res.data).toHaveLength(2)).catch(err => console.log(err))
      });
      it('正确返回公告数组',  () => {
        // expect([1,2]).toEqual([1,2])
      return fetchNotice().then(res => expect(res.data).toBeTruthy())
      });
      it('正确返回公告数组',  () => {
        // expect([1,2]).toEqual([1,2])
      return fetchNotice().then(res => expect(res.data).toContain('公告公告公告'))
      });
  })
})

注意：

___mocks____文件夹要和要mock的方法放在同一级目录。

2.如果mock的是nodejs方法，____ mocks ____文件夹要放在项目根目录。