vue-cli3 karma单元测试的实现

 更新时间:2019年01月18日 10:54:01   作者:saintkl  
这篇文章主要介绍了vue-cli3 karma单元测试的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Karma

Karma是一个测试工具,能让你的代码在浏览器环境下测试。代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来(比如要做样式的测试),如果你的代码只会运行在node端,那么你不需要用karma。

vue-cli3 结合karma

经过查找搜索到vue-cli-plugin-unit-karma插件, 集成vue-cli3与karma,但是结果不那么完美,执行的时候还是报错。

不过功夫不负有心人,终于找到解决方法,步骤如下

安装依赖

npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

在package.json层创建karma.conf.js (注意,是conf,不是config!!!)

内容如下

var webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
  config.set({
    frameworks: ['mocha'],
    files: [
      'tests/**/*.spec.js'  //tests目录下,所有.spce.js结尾的测试文件
    ],
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    reporters: ['spec'],
    browsers: ['ChromeHeadless']
  })
}

package.json内增加script命令

"test": "karma start"

最后执行 npm run test 即可

参考

Testing Single-File Components with Karma

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

相关文章

  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    下面小编就为大家分享一篇浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3+TS项目中eslint、prettier安装配置详细指南

    Vue3+TS项目中eslint、prettier安装配置详细指南

    为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue yaml代码编辑器组件问题

    vue yaml代码编辑器组件问题

    这篇文章主要介绍了vue yaml代码编辑器组件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue路由事件beforeRouteLeave及组件内定时器的清除方法

    vue路由事件beforeRouteLeave及组件内定时器的清除方法

    今天小编就为大家分享一篇vue路由事件beforeRouteLeave及组件内定时器的清除方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue+axios实现文件上传的实时进度条

    vue+axios实现文件上传的实时进度条

    最近用vue写上传的时候,遇到一个需求就是页面上展示上传的进度条,之后写过一次,但是用的是假交互,直接从0-100,今天分享一下用axios自带的onUploadProgress来完成这个小需求,感兴趣的朋友可以参考下
    2024-01-01
  • Vue中使用h5 Plus的实现方法

    Vue中使用h5 Plus的实现方法

    这篇文章主要介绍了Vue中使用h5 Plus的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue 父组件通过$refs获取子组件的值和方法详解

    vue 父组件通过$refs获取子组件的值和方法详解

    今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vuex 命名空间 namespaced的使用

    Vuex 命名空间 namespaced的使用

    本文主要介绍了Vuex 命名空间 namespaced的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue实现批量下载文件

    vue实现批量下载文件

    这篇文章主要为大家详细介绍了vue实现批量下载文件的方法(不走后端接口的方法),文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • vue使用Swiper踩坑解决避坑

    vue使用Swiper踩坑解决避坑

    这篇文章主要为大家介绍了vue使用Swiper踩坑及解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论