$ karma init my.conf.js
Which testing framework do you want to use?
Press tab to list possible options. Enter to move to the next question.
> 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
Do you want to capture a browser automatically?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Press Enter to move to the next question.
> test/**/*.js
>
Should any of the files included by the previous patterns be excluded?
You can use glob patterns, eg. "**/*.swp".
Press Enter 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
const webpackConfig = require('../../webpack.config.test.js')
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', 'sinon-chai'],
// list of files / patterns to load in the browser
files: [
'./index.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: {
'./index.js': ['webpack', 'sourcemap', 'coverage']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha', 'coverage'],
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
},
.
.
.
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
}
})
}
const webpackConfigBase = require('./webpack.config.base.js')
const config = Object.assign(webpackConfigBase.config, {
// sourcemap 模式
devtool: '#inline-source-map',
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
})
module.exports = config
``
#### 编辑index.js入口文件
这个文件是为了配合`karma-webpack`的,详情见[Alternative Usage](https://github.com/webpack-contrib/karma-webpack#alternative-usage)
```js
// require all test files (files that ends with .spec.js)
// 语法说明:https://doc.webpack-china.org/guides/dependency-management/#require-context
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
// require all src files which in the app/common/js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../app/common/js/', true, /\.js$/)
srcContext.keys().forEach(srcContext)
新的一年
之前因为上家公司的经营出了问题,年前的大裁员,过了一个漫长的春节。 之后加入了新公司,然后正好赶上一个很紧急的项目,忙成狗,因此好久没更新文章了。 不过,我又回来啦!
前言
自动化测试,我们将使用karma和nightmare,内容会包括:
一、单元测试
安装karma
在
package.json
的scripts
配置"test": "karma start"
初始化karma
初始成功以后,会生成一份
karma.conf.js
配置文件。顺便,在根目录创建一个
test
的文件夹,在这文件夹中创建一份index.js
,内容为:运行一下:
npm run test
我们会看到程序会自动打开chrome浏览器,然后显示测试结果。正式的写个单元测试
重新组织test文件夹
因为我们还要做e2e测试,所以,在test下,用各个文件夹区分,unit下就是单元测试的内容了。
安装一系列包
karma-webpack
:因为我们的项目代码是用es6或者es7写的,所以webpack编译是必须的karma-sourcemap-loader
:sourcemap明显是必要的karma-coverage
:做代码覆盖率的时候需要用chai
:搭配mocha断言sinon
:搭配mocha做spy、stub、mocksinon-chai
:用chai来做sinon的断言,可以说是扩展karma-sinon-chai
:方便在测试代码中的调用,直接就能用expect、sinon.spy等,不需要每个文件都importkarma-mocha-reporter
:mocha测试完的报告像karma、mocha、chai、sinon这种测试工具,我不会很详细的介绍,全部都介绍的话内容实在有点多,而且也比较枯燥。想要学习可以看我的参考资料,是我花了大把时间筛选整理出来的。
修改karma.conf.js
karma原本在根目录,我们直接移过来就好了。然后修改的不多,我稍微解释一下:
stats: 'errors-only'
我们让webpack的编译过程不显示出来,除非编译报错配置webpack.test.config.js
测试代码放在
./specs
文件夹下,被测试原文件在../../app/common/js/
下。这里我只测试一些公共的js文件,如果你需要测试其它,可自行修改。比如一些基于vue的UI组件库,你想要测试所有组件代码,还需要做些配置上的修改,这方面可以参考滴滴的cube-ui项目,挺完整的,覆盖率也很高。正式写测试代码
编辑
dom.spec.js
文件:代码注释已经很清楚啦~
运行测试
先修改下
package.json
配置:"test:unit": "karma start test/unit/karma.conf.js"
运行:参考资料
karma 测试框架的前世今生 karma thesis karma 官网 前端自动化测试工具overview 前端自动化测试解决方案探析 mocha官网 代码测试覆盖率分析 聊一聊前端自动化测试 Sinon指南: 使用Mocks, Spies 和 Stubs编写JavaScript测试 sinon-chai github
论文是个很有意思的东西,看多了你会惊人地发现,很多大厂有深度的文章其实都是对论文的纯翻译~ 另外还参考了vue和滴滴的cube-ui的项目测试部分。
项目完整代码
Vue前端架构-by 子咻