侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

使用Karma做vue组件单元测试的实现

前端  /  管理员 发布于 2年前   228

养成良好的编码习惯,一个合格的程序员需要掌握一些编写单元测试的能力。单元测试也可以整体上提升我们的代码质量,这里介绍下 VUE 组件的单元测试。

如果想直接通过 Demo 学习,可以跳过下面的内容,点击这里下载示例

技术栈

  • @vue/test-utils[1.0.0-beta.30]
  • istanbul-instrumenter-loader[3.0.1]
  • karma[4.4.1]
  • karma-chrome-launcher[3.1.0]
  • karma-mocha[1.3.0]
  • karma-sourcemap-loader[0.3.7]
  • karma-coverage-istanbul-reporter[2.1.1]
  • karma-webpack[4.0.2]
  • webpack[4.41.5]

定义配置文件

karma.conf.js 文件用于 karma 的配置,使用 node_modules/.bin/karma init 命令创建该文件,我们定义如下配置:

// Karma configurationconst webpackConfig = require('./config/webpack.test.config.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' ],  // list of files / patterns to load in the browser  files: [   'test/**/*.spec.js'  ],  // preprocess matching files before serving them to the browser  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor  preprocessors: {   'test/**/*.spec.js': [ 'webpack', 'sourcemap' ]  },  // webpack config  webpack: webpackConfig,  webpackMiddleware: {   stats: 'errors-only'  },  // 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,  // Concurrency level  // how many browser should be started simultaneous  concurrency: Infinity })}
  1. 设置 frameworks 为 ['mocha'],即使用 mocha 测试框架
  2. 设置 files 为 ['test/**/*.spec.js'],即对 test 目录下所有的后缀为 .spec.js 文件测试
  3. 设置 preprocessors 为 {'**/*.spec.js': ['webpack', 'sourcemap']},即使用 webpack,sourcemap 对所有的测试文件进行 webpack 打包
  4. 设置 browsers 为 Chrome,即使用 Chrome 浏览器作为测试浏览器

编写测试用例

详细的关于 @vue/test-utils 用法,查看 https://vue-test-utils.vuejs.org/zh/

import { expect } from 'chai'import { shallowMount } from '@vue/test-utils'import Header from '../src/components/Header'describe('Header', () => { const wrapper = shallowMount(Header) const header = wrapper.find('header') const h1 = wrapper.find('h1') it('有 header 标签', () => {  expect(header.exists()).to.be.true }) it('有 h1 标签', () => {  expect(h1.exists()).to.be.true }) it('h1 的文案为“VUE 单页模版”', () => {  expect(h1.text()).to.equal('VUE 单页模版') }) it('h1 标签在 header 标签中', () => {  expect(header.contains('h1')).to.be.true })})

这里我引用 vue-single-page 的 Header 组件测试用例

  1. 首先通过 shallowMount 获取 wrapper
  2. 使用 chai 断言库编写相关的测试用例

运行结果

i 「wdm」: Compiled successfully.
15 01 2020 18:28:13.799:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/
15 01 2020 18:28:13.813:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
15 01 2020 18:28:13.820:INFO [launcher]: Starting browser Chrome
15 01 2020 18:28:17.075:INFO [Chrome 79.0.3945 (Windows 10.0.0)]: Connected on socket PUKPz4iBuFzeVNSsAAAA with id 91716917
TOTAL: 4 SUCCESS

可以看到我们的单元测试已经通过了

测试覆盖率报告

测试完成后,我们需要查看测试覆盖率报告。这需要在 webpack.test.config.js 和 karma.conf.js 中做一些配置修改

webpack.test.config.js

const merge = require('webpack-merge')const path = require('path')const webpackCommonConfig = require('./webpack.common.config')const testConfig = { devtool: 'inline-source-map', mode: 'none', module: {  rules: [   {    test: /\.spec.js$/i,    enforce: 'pre',    use: [     {      loader: 'istanbul-instrumenter-loader',      options: {       esModules: true      }     }    ]   }  ] }}module.exports = merge(webpackCommonConfig, testConfig)

添加一个优先执行的编译 .spec.js 文件的 rules,loader 使用 istanbul-instrumenter-loader 并开启 esModules 模式

karma.conf.js

module.exports = function(config) { config.set({   // ...    coverageIstanbulReporter: {   reports: [ 'html', 'text' ],   fixWebpackSourcePaths: true  },    reporters: [ 'coverage-istanbul' ]  //...   })}
  1. 设置 reporters 为 [ 'coverage-istanbul' ],即使用 coverage-istanbul reporters
  2. coverageIstanbulReporter 配置项用于设置 coverage-istanbul 的参数,详细的参数可以参考 这里

运行结果

再次执行单元测试,我们会看到测试覆盖率的相关信息

----------------|----------|----------|----------|----------|-------------------|File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |----------------|----------|----------|----------|----------|-------------------|All files    |   100 |   100 |   100 |   100 |          | Header.spec.js |   100 |   100 |   100 |   100 |          |----------------|----------|----------|----------|----------|-------------------|

也可以通过生成到 coverage 目录下的网页文件,在浏览器中查看

参考资料

https://vue-test-utils.vuejs.org/zh/
https://github.com/mattlewis92/karma-coverage-istanbul-reporter

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • vue-cli3 karma单元测试的实现
  • karma+webpack搭建vue单元测试环境的方法示例
  • 详解Vue单元测试Karma+Mocha学习笔记


  • 上一条:
    vue列表数据发生变化指令没有更新问题及解决方法
    下一条:
    html meta viewport属性说明
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 在uniapp开发微信小程序中图片大小显示不正常解决方法(0个评论)
    • 在vue2中如何实现v-model示例(0个评论)
    • js + Bolb实现文件流下载csv文件示例代码(0个评论)
    • 近期文章
    • 在Laravel应用程序如何减少代码重复编写(0个评论)
    • 在laravel项目中提高安全性方式推荐:CSP内容安全策略(0个评论)
    • 在go语言中从值中获取常量名称代码示例(0个评论)
    • 在go语言中如何通过名称获得结构字段和值代码示例(0个评论)
    • 在go语言中用JQuery + html2canvas实现拍摄浏览器的屏幕截图示例(0个评论)
    • 人生感悟分享:讲一个大学毕业生到社畜老狗的蜕变心路历程(0个评论)
    • laravel9框架报错Target class... does not exist解决方式(0个评论)
    • Laravel 9.48版本发布(0个评论)
    • Meta高级工程师现身说法:程序员干得越久,代码写得越少?(0个评论)
    • 本站zongscan祝大家除夕快乐,2023有奔头(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客