You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
$ 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
初始成功以后,会生成一份karma.conf.js配置文件。
顺便,在根目录创建一个test的文件夹,在这文件夹中创建一份index.js,内容为:
describe('A spec suite',function(){it('contains a passing spec',function(){console.log('Hello Karma')})})
运行一下: npm run test
我们会看到程序会自动打开chrome浏览器,然后显示测试结果。
constwebpackConfig=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-adapterframeworks: ['mocha','sinon-chai'],// list of files / patterns to load in the browserfiles: ['./index.js'],// list of files / patterns to excludeexclude: [],// preprocess matching files before serving them to the browser// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessorpreprocessors: {'./index.js': ['webpack','sourcemap','coverage']},// test results reporter to use// possible values: 'dots', 'progress'// available reporters: https://npmjs.org/browse/keyword/karma-reporterreporters: ['mocha','coverage'],coverageReporter: {dir: './coverage',reporters: [{type: 'lcov',subdir: '.'},{type: 'text-summary'}]},...// Continuous Integration mode// if true, Karma captures browsers, runs the tests and exitssingleRun: true,// Concurrency level// how many browser should be started simultaneousconcurrency: Infinity,webpack: webpackConfig,webpackMiddleware: {stats: 'errors-only'}})}
constwebpackConfigBase=require('./webpack.config.base.js')constconfig=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`的,详情见[AlternativeUsage](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,内容会包括:
其实,单元测试一般用在写公共包的时候,比如通用的js函数库,通用的UI组件库。基本不太会在做业务项目的时候还使用单元测试。
然后,e2e测试的话,那其实往往是测试工程师需要做的,往往使用selenium。
那难道前端就不需要学测试了吗?
答案肯定是否定的,不然我写个毛......
vue的项目就用了单元测试和e2e。
基于vue的UI组件库,比如:饿了么的element、滴滴的cube-ui、有赞的vant等都有单元测试(咩有e2e,因为没必要)。
滴滴的话,我问了下黄轶大佬,他们项目前端自动化测试是用了单元测试和e2e的。
总之,两种都是由应用场景的,e2e虽然用的不多,或者说有时候不是前端自动化的范畴,但是其实做起来很简单,学会准没错!
一、单元测试
安装karma
在
package.json
的scripts
配置"test": "karma start"
初始化karma
初始成功以后,会生成一份
karma.conf.js
配置文件。顺便,在根目录创建一个
test
的文件夹,在这文件夹中创建一份index.js
,内容为:运行一下:
npm run test
我们会看到程序会自动打开chrome浏览器,然后显示测试结果。
正式的写个单元测试
重新组织test文件夹
. └── unit ├── index.js ├── karma.conf.js └── specs └── dom.spec.js
因为我们还要做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 子咻
The text was updated successfully, but these errors were encountered: