大多数开发者都知道需要写单元测试，但是不知道每个单元测试应用的主要内容以及如何做单元测试，在介绍jest测试框架前，我们先来了解下一些测试相关的概念。
为什么需要单元测试？
- 保证质量：随着迭代的过程，开发人员很难记清所有的功能点，功能点的新增和删除在代码改变后，进行回归测试时，依靠人工QA很容易出错遗漏。
- 自动化：通过编写测试用例，只需要编写一次，多次运行，同样的事情不需要从头再来测一遍,很多时候QA的工作量就是这么增加的，新的版本上线，人工QA都需要所有的功能点从新测试一遍。
- 特性文档：单元测试可以作为描述和记录代码所实现的所有需求，有时候可以作为文档来使用，了解一个项目可以通过阅读测试用例比看需求文档更清晰。
- 驱动开发，指导设计：代码被测试的前提是代码本身的可测试性，那么要保证代码的可测试性，就需要在开发中注意API的设计，TDD将测试前移就是起到这么一个作用
测试类型
你可能接触过各种测试框架、大体上，最重要测试类型有：
- 单元测试- 依靠模拟输入证实是否是期望的输出来分别的测试函数或者类。
- 集成测试 - 测试若干模块来确保他们像预期的那样工作。
- 功能测试- 在产品本身（例如在浏览器上）对一个场景进行操作，而不考虑内部结构以确保预期的行为。
测试工具类型
测试工具可以分为以下功能，有些提供一个功能，有些提供了一个组合。
使用工具组合是很常见的，即使你可以使用单一的工具实现同样的功能，是所有组合可以获得更灵活的功能。
- 测试环境（Mocha , Jasmine, Jest, Karma）
- 测试结构 （Mocha , Jasmine, Jest, Cucumber）
- 断言函数（Chai, Jasmine, Jest, Unexpected）
- 生成,显示、监听测试结果（Mocha , Jasmine, JestKarma）
- 生成,比较组件和数据结构的快照，以确保之前运行的更改是预期的。（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 ____文件夹要放在项目根目录。
