1、mocha的使用
|
1、安装 cnpm install --save-dev mocha |
2、基本语法 - describe . 对应测试的模块 . /函数 - it 对应test case - 异步代码测试 - callback - promis - async / await - 钩子hoks - before / after - beforeEach / afterEach // 每个用例前后生效 - only / skip - 只运行/忽略一个或者一组用例 |
2、chai
|
1、安装 cnpm install --save-dev chai |
2、基本语法 BDD - expert > chai.expert - should > chai.should TDD - assert > chai.assert |
3、sinon
|
1、安装 npm install --save-dev sinon |
2、基本语法 1、Spies - 提供函数调用的信息，但不改变函数行为 2、Stubs - 替换掉指定的函数 3、Mocks - 组合spies和stubs，可以替换一个完整对象 |
单元测试的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="../node_modules/mocha/mocha.css"> </head> <body> <!-- 放置单元测试的结果 --> <div id="mocha"></div> <script src="../node_modules/mocha/mocha.js"></script> <script src="../node_modules/chai/chai.js"></script> <script src="../node_modules/sinon/pkg/sinon.js"></script> <script type="module" src="./test.js"></script> <script type="module" src="./async.spec.js"></script> </body> </html>
测试函数
test.js import { formatDate, addFun } from '../src/utils/base.js' // 指定BDD的测试风格 mocha.setup('bdd') // 引入语法 let expect = chai.expect chai.should() let assert = chai.assert // 测试 describe('test base#addFun', function() { it('should return amuont = 4', function() { console.log('test case------------------------------') // expect(addFun(1, 3)).to.eql(4) // expect - BDD addFun(1, 3).should.eql(4) // should - BDD // assert.equal(addFun(1, 3), 4) // asset - TDD }) it('应该返回 amuont = 8', function() { // expect(addFun(1, 3)).to.eql(4) // expect - BDD addFun(2, 6).should.eql(8) // should - BDD // assert.equal(addFun(1, 3), 4) // asset - TDD }) }) mocha.run()
测试异步代码
获取用户信息
async.js import { getFirstPageInfo } from '../src/service/cstapi.js' // 指定BDD的测试风格 mocha.setup('bdd') // 引入语法 let expect = chai.expect /** * 异步测试 - callback */ describe('async test', function() { it('it themeStyle should be "grey"', () => { async.getFirstPageInfo(data => { console.log('test case------------------------------', data) expect(data.themeStyle).to.eql('red') }) }) }) /** * 异步测试 - promise */ describe('async test', function() { it('it themeStyle should be "grey"', () => { async.getFirstPageInfo() .then(data => { console.log('test case------------------------------', data) expect(data.themeStyle).to.eql('red') }) }) }) /** * 异步测试 - async/awit */ describe('async test', function() { it('it themeStyle should be "grey"', () => { let res = await async.getFirstPageInfo() return expect(data.themeStyle).to.eql('red') }) }) mocha.run()
测试异步代码 - mock接口
- 使用spy获取接口调用信息
- 使用stub替换接口调用方法
import { getFirstPageInfo } from '../src/service/cstapi.js'
// 指定BDD的测试风格
mocha.setup('bdd')
// 引入语法
chai.should()
/**
* 异步测试 - spy
*/
describe('async test', function() {
it('it themeStyle should be "grey"', () => {
let ajaxSpy = sinon.spy(jQuery, 'ajax')
getFirstPageInfo(data => {
console.log('test case------------------------------', data)
expect(data.themeStyle).to.eql('red')
})
console.log(ajaxSpy.callCount)
sinon.assert.calledOnce(ajaxSpy)
ajaxSpy.restore()
})
})
/**
* 异步测试 - spy
*/
describe('async test', function() {
it('it themeStyle should be "grey"', () => {
let ajaxSpy = sinon.stub(jQuery, 'ajax')
getFirstPageInfo()
console.log(ajaxSpy.callCount)
ajaxSpy.restore()
})
})
/**
* 异步测试 - stub and spy
*/
describe('async test', function() {
it('it themeStyle should be "grey"', () => {
let ajaxStub = sinon.stub(jQuery, 'post')
ajaxStub.yields()
let callback = sinon.spy( () => {
console.log('mock的回调') // 返回自己想要的结果
})
getFirstPageInfo(callback)
console.log(ajaxStub.callCount)
console.log(callback.callCount)
ajaxSpy.restore()
})
})
mocha.run()