vue-cli3 karma单元测试的实现

2024-09-27 15:57:15

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-Router 进行单元测试的方法

由于路由通常会把多个组件牵扯到一起操作,所以一般对其的测试都在端到端/集成阶段进行,处于测试金字塔的上层.不过,做一些路由的单元测试还是大有益处的. 对于与路由交互的组件,有两种测试方式: 使用一个真正的 router 实例 mock 掉 $route 和 $router 全局对象因为大多数 Vue 应用用的都是官方的 Vue Router,所以本文会谈谈这个. 创建组件我们会弄一个简单的 <App>,包含一个 /nested-child 路由.访问 /nested-child
karma+webpack搭建vue单元测试环境的方法示例

最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下.这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境. 准备这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境. 代码地址:https://github.com/MarxJiao/vue-karma-test 目录结构如下目录结构 app.vue和child.vue代码 app.vue child.vue 运行效果如下: 运行效果测试环境搭建注意:这里
详解Vue单元测试case写法

书接上文,karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率.今天来说一下vue单元测试思路和case的写法.测试框架使用jasmine,语法参考. 代码地址:https://github.com/MarxJiao/vue-karma-test/tree/spec-demo 测试关注点对于vue组件,单元测试测试主要关注以下几点: vue组件加载后,各数据模型是否符合预期定义的方法是否可用 filter是否可用带有props的组件,数据
如何为vue的项目添加单元测试

动机单元测试能避免出现一些代码运行结果与预期不符的错误,通常是一些比较低级但又难以发现的问题. 粗心且懒,在每次调整之后,需要不断地检查代码,反复去走流程.担心由于自己的改动而导致了逻辑上的错误.而这里面的一大部分工作其实可以让单元测试来完成. 有了单元测试之后,可以对代码本身形成一种规范.如果在进行单元测试过程中发现自己的一些代码不方便进行测试,那么你可能需要重新审视这些代码,看是否有一些设计上不合理或者可以优化的地方. 嵌入了单元测试的项目显得更加的专业,也会更有逼格,测试本身是开发环节需
关于Vue Webpack2单元测试示例详解

前言最近发现一个问题,vue-cli 提供的官方模板确实好用.但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服. 所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把.这里分享一下配置带覆盖率的单元测试.分享出来供大家参考学习,话不多少了,来一起看看详细的介绍: 一.文件结构基本的文件结构. ├─src │ ├─assets │ ├─components │ ├─app.vue │ └─main.js ├─test │ └─unit │ ├─coverage │ ├─specs │ ├
教你如何编写Vue.js的单元测试的方法

Vue.js是一个JavaScript框架,可用于构建Web应用程序的前端框架.特别是在创建复杂功能时,对于每个项目,有必要在我们的应用程序中查看所有内容,并检查它是否符合预期.然而,对于大型项目,每次新的更新后,检查每个功能将变得很麻烦.因此,我们可以创建可以一直运行的自动化测试,并保证我们的代码可以正常运行.在本文中,我们将为VueJS创建一些简单的单元测试. 要进行测试,我们将先制作一个基本的待办事项列表组件.我们将测试该列表是否正确显示,并且用户可以将新项目添加到待办事项列表中.希望在本
详解Vue单元测试Karma+Mocha学习笔记

在使用vue-cli创建项目的时候,会提示要不要安装单元测试和e2e测试.既然官方推荐我们使用这两个测试框架,那么我们就动手去学习实践一下他们吧. 简介 Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试. 换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试.需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来
详解使用jest对vue项目进行单元测试

最近领导对前端提出了新的要求,要进行单元测试.之前使用vue做了一个快报名小程序的pc端页面,既然要做单元测试,就准备用这个项目了,之前有些react的经验,vue还是第一遭 vue-cli3.0单元测试方面更加完备,就先升级到了cli3.0,因为项目是用typescript写的,需要ts-jest,得到jest的配置如下 { "jest": { "moduleFileExtensions": [ "js", "jsx", &
vue2单元测试环境搭建

从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一下心得. 1.用vue-cli生成一个新的项目,把单元测试需要的文件直接复制到你的项目中 vue init webpack vuetest 文件下载地址源代码Github链接 2.安装Karma+Mocha模块,这个模块依赖比较多,我在遇到了坑,解决问题半天发现缺少了某个模块,在这里全部列出需要的
vue项目中添加单元测试的方法

从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一下心得. 1.用vue-cli生成一个新的项目,把单元测试需要的文件直接复制到你的项目中 vue init webpack vuetest 2.安装Karma+Mocha模块,这个模块依赖比较多,我在遇到了坑,解决问题半天发现缺少了某个模块,在这里全部列出需要的模块复制代码代码如下: npm i

vue-cli3 karma单元测试的实现

相关推荐

随机推荐