前端单元测试探索
作者:ecmadao 发布时间:[ 2016/9/20 14:00:08 ] 推荐标签:软件测试 单元测试
initial
下面两篇文章值得一看:
Testing in ES6 with Mocha and Babel 6
Using Babel
setup
$ npm i mocha --save-dev
$ npm i chai --save-dev
Use with es6
babel 6+
$ npm install --save-dev babel-register
$ npm install babel-preset-es2015 --save-dev
// package.json
{
"scripts": {
"test": "./node_modules/mocha/bin/mocha --compilers js:babel-register"
},
"babel": {
"presets": [
"es2015"
]
}
}
babel 5+
$ npm install --save-dev babel-core
// package.json
{
"scripts": {
"test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register"
}
}
Use with coffeescript
$ npm install --save coffee-script
{
"scripts": {
"test": "./node_modules/mocha/bin/mocha --compilers coffee:coffee-script/register"
}
}
Use with es6+coffeescript
After done both...
{
"scripts": {
"test": "./node_modules/mocha/bin/mocha --compilers js:babel-core/register,coffee:coffee-script/register"
}
}
# $ mocha
$ npm t
$ npm test
chai
import chai from 'chai';
const assert = chai.assert;
const expect = chai.expect;
const should = chai.should();
foo.should.be.a('string');
foo.should.equal('bar');
list.should.have.length(3);
obj.should.have.property('name');
expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(list).to.have.length(3);
expect(obj).to.have.property('flavors');
assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');
assert.lengthOf(list, 3);
assert.property(obj, 'flavors');
Test
测试的一个基本思路是,自身从函数的调用者出发,对函数进行各种情况的调用,查看其容错程度、返回结果是否符合预期。
import chai from 'chai';
const assert = chai.assert;
const expect = chai.expect;
const should = chai.should();
describe('describe a test', () => {
it('should return true', () => {
let example = true;
// expect
expect(example).not.to.equal(false);
expect(example).to.equal(true);
// should
example.should.equal(true);
example.should.be.a(boolen);
[1, 2].should.have.length(2);
});
it('should check an object', () => {
// 对于多层嵌套的Object而言..
let nestedObj = {
a: {
b: 1
}
};
let nestedObjCopy = Object.assign({}, nestedObj);
nestedObj.a.b = 2;
// do a function to change nestedObjCopy.a.b
expect(nestedObjCopy).to.deep.equal(nestedObj);
expect(nestedObjCopy).to.have.property('a');
});
});
AsynTest
Testing Asynchronous Code with MochaJS and ES7 async/await
mocha无法自动监听异步方法的完成,需要我们在完成之后手动调用 done() 方法
而如果要在回调之后使用异步测试语句,则需要使用 try/catch 进行捕获。成功则 done() ,失败则 done(error)
// 普通的测试方法
it("should work", () =>{
console.log("Synchronous test");
});
// 异步的测试方法
it("should work", (done) =>{
setTimeout(() => {
try {
expect(1).not.to.equal(0);
done(); // 成功
} catch (err) {
done(err); // 失败
}
}, 200);
});
异步测试有两种方法完结: done 或者返回 Promise 。而通过返回 Promise ,则不再需要编写笨重的 try/catch 语句
it("Using a Promise that resolves successfully with wrong expectation!", function() {
var testPromise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("Hello World!");
}, 200);
});
return testPromise.then(function(result){
expect(result).to.equal("Hello!");
});
});
mock
mock是一个接口模拟库,我们可以通过它来模拟代码中的一些异步操作
React单元测试
Test React Component
React组件无法直接通过上述方法进行测试,需要安装enzyme依赖。
$ npm i --save-dev enzyme
#
$ npm i --save-dev react-addons-test-utils
假设有这样一个组件:
// ...省略部分import代码
class TestComponent extends React.Component {
constructor(props) {
super(props);
let {num} = props;
this.state = {
clickNum: num
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
let {clickNum} = this.state;
this.setState({
clickNum: clickNum + 1
});
}
render() {
let {clickNum} = this.state;
return (
<div className="test_component">
{clickNum}
<span onClick={this.handleClick}>点我加1</span>
</div>
)
}
}
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系SPASVO小编(021-61079698-8054),我们将立即处理,马上删除。
相关推荐
iOS单元测试mocha、chai、sinon和istanbul实现百分之百的单元测试覆盖率关于单元测试的总结及思考编写更好的Java单元测试的7个技巧Android单元测试框架Robolectric3.0介绍(一)使用Kiwi单元测试总结单元测试如此重要,为什么你不知道Python单元测试??使用装饰器实现测试跳过和预期故障对Controller的单元测试写好单元测试的10个技巧单元测试的重要性Angular单元测试系列??Component、Directive、Pipe 以及ServiceAndroid单元测试的整理提升单元测试体验的利器--Mockito使用总结iOS UnitTest单元测试Vue的单元测试探索(二)
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11热门文章
常见的移动App Bug??崩溃的测试用例设计如何用Jmeter做压力测试QC使用说明APP压力测试入门教程移动app测试中的主要问题jenkins+testng+ant+webdriver持续集成测试使用JMeter进行HTTP负载测试Selenium 2.0 WebDriver 使用指南