使用AVA和Enzyme测试React组件(一)
React的出现让页面的测试发生了变化,原来一些耗时耗性能的自动化测试可以转化成快速的单元测试,今天介绍一下如何做React的单元测试,以及AVA和Enzyme的使用。
AVA是什么
AVA是一个JS的单元测试框架,与其他测试框架相比最大的特点是可以并发运行测试,并行地执行每个测试文件,让CPU的利用率达到最大化。有个项目使用AVA让单元测试的执行时间从31秒(原来是用Mocha)下降到11秒。另外AVA的团队也是几个开源社区的大神,为首的sindresorhus是github上获得星星最多的人。
为什么选择AVA
前端也有很多不错的测试框架,比如Mocha、Tap和Tape等,但AVA这个后起之秀是青出于蓝而胜于蓝,除了上面说的并发测试这个优点外,还有配置简单,多种报告,环境隔离等优点。Mocha的作者TJ也是个牛人,他对AVA推崇有加,说如果让他来重新开发Mocha的话他也会按照AVA这种思路来做。
AVA的语法
1 | import test from 'ava'; |
test方法可以带一个字符串的标题和一个回调函数,这个回调函数就是你的测试代码,使用过其他测试框架的开发人员可以很快熟悉它的API并写出自己的测试。
AVA的配置
AVA的配置也十分简单,虽然Mocha的配置也不复杂,但相对于后者AVA的配置特点是灵活和集中,你可以用多种方式来配置AVA,就拿配置Babel来说,你可以将Babel配置一起写在package.json
里面,也可以将Babel配置写在原来的Babel配置文件中,而在package.json
文件里面写上babel: inherit
的配置就可以了。
1 | { |
AVA的断言
AVA内置了断言库,几个常用的断言方法已经可以满足大部分的断言需求,无需再用其他的断言库。
1 | .pass([message]) |
当然你也可以集成其他的第三方断言库,比如chai,但这样的话你可能就使用不到测试方法中t
这个测试对象了。
1 | import { exppect } from 'chai'; |
AVA的多种支持
- 支持Promise
1 | test(t => { |
- 支持Async
1 | test(async t => { |
- 支持Callback
1 | test.cb(t => { |
现在有了async和promise一般不推荐再使用callback,AVA的callback支持是为了方便测试使用了callback的遗留代码。
注意,测试callback需要调用t.end
方法来结束测试。
隔离环境
AVA会为每个测试环境单独启动一个进程来跑测试,这样的好处就保证了每个测试文件的环境不会受到其他测试文件的影响,也要求你写测试的时候更注重原子性,要求测试不依赖其他测试的运行结果或者测试数据,让测试具有独立性。
但并发测试也会带来一些测试方法上的改变,比如说以前串行测试要测试文件的IO操作,可能会临时创建一个文件来进行读写,串行测试时由于每个测试都是顺序进行的,所以只需要一个文件就可以满足需求。但如果是并发测试,一个临时文件可能会被多个测试同时进行读写,这样就会导致冲突,最好的做法是为每个测试都单独创建一个临时文件来做测试。