单元测试分为 TDD(测试驱动开发)和 BDD(行为驱动开发)两种类型
两者的区别是驱动者、主导者不同
断言库
node是内置断言模块assert的,也有一些其他的断言库,如should.js expect.js
下面是assert, should.js, expect.js的一些写法
let a = 10, obj = {a: '1'}
// assert
assert.equal(a, 10, 'a != 10啊老铁')
// should.js
a.should.equal(10, 'a != 10啊老铁')
should(a).equal(10, 'a != 10啊老铁')
obj.should.have.key('a').be.a.Number()
// expect.js
expect(a).to.equal(10, 'a != 10啊老铁')
expect(obj).to.have.property('a').to.be.a('number')
断言库各有优缺点,可根据实际情况,选择使用哪种断言
测试框架
Mocha
Mocha是一个能够运行在Node和浏览器中的多功能的js测试框架
首先在我们测试的项目中安装Mocha
npm i mocha -D
然后在我们的项目中新建一个test文件夹,Mocha会自动检索这个目录下的测试文件并运行。
test/hello-test.js
const should = require('should')
let a = 10
describe('it is test', function() {
it('a should equal 10', () => {
should(a).equal(10, 'a != 10啊老铁')
});
it('a should equal 11', () => {
should(a).equal(11, 'a != 11啊老铁')
});
})
在控制台中输入mocha,即可看到运行结果
it is test
✓ a should equal 10
1) a should equal 11
1 passing (11ms)
1 failing
1) it is test a should equal 11:
AssertionError: a != 11啊老铁
+ expected - actual
-10
+11
describe
用来描述你要测的主体是什么,可以多层嵌套
it
描述具体的一条测试用例的内容
Karma
Karma是个将我们的测试用例跑在浏览器上的框架
karma的使用
首先安装karma
npm i -g karma-cli
npm i --save-dev karma
然后在测试项目里输入karma init来初始化karma项目
$ karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
// 是选择你所用的测试框架 这里我们选择mocha(按tab健切换至mocha,敲回车)
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
// 是否在测试项目里使用require.js, 这里我们选择no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
// 默认打开的浏览器,选择chrome
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
// 哪些是需要引入的文件,这里除了本地文件,也可以引入cdn文件,和听过npm安装在依赖包里的文件,比如https://cdn.bootcss.com/jquery/2.2.4/jquery.js node_modules/should/should.js
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
// 加载的目标文件不需要测试的文件
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
// 是否watch所有的文件
Config file generated at "/mocha_lean/karma.conf.js".
// 会生成karma.conf.js在测试的项目里,刚才所有的选项都可以在这里就行修改
在命令行中输入 karma start就会起一个端口默认为9876的服务,并且自动打开chrome,命令行中也出现了测试结果
09 11 2018 20:03:53.283:WARN [karma]: No captured browser, open http://localhost:9876/
09 11 2018 20:03:53.312:INFO [karma-server]: Karma v3.1.1 server started at http://0.0.0.0:9876/
09 11 2018 20:03:53.312:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
09 11 2018 20:03:53.320:INFO [launcher]: Starting browser Chrome
09 11 2018 20:03:56.367:INFO [Chrome 70.0.3538 (Mac OS X 10.14.0)]: Connected on socket gUMQo5IzqR60ZdIVAAAA with id 35123873
如何在浏览器中查看当前运行的测试结果呢?
http://localhost:9876页面的右上角有一个debug按钮,点开后,在打开的页面中打开控制台,测试结果会输出在控制台中
karma.conf.js的内容
// Karma configuration
// Generated on Fri Nov 09 2018 19:57:45 GMT+0800 (CST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '', //基础路径
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha'],//测试框架
// list of files / patterns to load in the browser
files: [ //引入的文件,这里的文件会被karma以标签移入到html中,所以需要注意文件的顺序
'test/hello-test.js',
'https://cdn.bootcss.com/jquery/2.2.4/jquery.js'
],
// list of files / patterns to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876, //端口号
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false, // 持续集成模式 如果该值为true,karma将会启动和捕获配置的浏览器,运行测试然后退出 这里需要注意的是如果配置了travis-ci的话,需要设置为true,不然travis-ci会一直跑下去,没法自动结束
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
框架适配器(framework adapters)比如:Karma-mocha, Karma-chai ,reporters 比如 Karma-spec-reporter (后面我们还会介绍 Karma-coverage),以及预处理器,比如 Karma-webpack, Karma-sourcemap-loader,还有加载器(launchers),比如 Karma-chrome-launcher,都是作为 Karma 插件工作的。
针对这些 Karma 插件 我们都要安装对应的 npm 包,这些插件一般是以 karma-
开头,而 Karma 默认会自动加载 karma-
开头的 npm 包。因此我们没有在配置文件中明确指定 plugins
配置项(实际上它的默认配置项为 karma-*
),但是一定要记得安装相应的 npm 包,特别是框架适配器和加载器,框架指定 Mocha 就要安装 Karma-mocha,浏览器指定 Chrome ,就要安装 Karma-chrome-launcher。
Travis CI
Travis CI 提供的是持续集成服务 它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。
首先我们需要进入Travis CI官网
用我们的github账号登录,并将我们github上的一个项目关联到travis-ci上,并加以配置
之后在我们的项目的根目录下新建一个.travis.yml文件,这是配置文件,指定了 Travis 的行为。之后我们每次向github提交代码时都会在travis-ci中跑一遍我们的测试脚本
Travis 提供了7个钩子。
before_install:install 阶段之前执行
before_script:script 阶段之前执行
after_failure:script 阶段失败时执行
after_success:script 阶段成功时执行
before_deploy:deploy 步骤之前执行
after_deploy:deploy 步骤之后执行
after_script:script 阶段之后执行
.travis.yml文件
language: node_js // 指定运行的语言
script: npm run test // 所需要跑的script命令, 如果不需要运行,可设置为true
# 缓存 node_modules 文件夹,不需要每次都下载安装全部 npm 包。
cache:
directories:
- node_modules
# 指定 node 版本
node_js:
- "11"
os: osx // 指定跑的测试脚本的环境
before_install: //在运行之前所需要运行的脚本,这里是安装karma-cli
- npm install karma-cli -g
// 可能会报没有chrome的错,需要加这两条命令
sudo: required
addons:
chrome: stable
// 如果travis-ci测试脚本一直跑,无法终结,可以通过配置karma的singleRun为true即可解决
配置好后把项目代码提交至github上,就可以去Travis CI官网查看是否运行通过了。
Travis-CI 还可以做很多事情,想要了解更多有关 Travis-CI 的使用方式,可以自行去 Travis-CI 官网 查看文档。我们只是使用了它的自动化测试的功能