Vue单元测试---Karma+Mocha+Chai实践

Ververica 发布于2019-08-21 16:18 / 687人阅读

摘要：官方推荐使用来进行单元测试。导入和组件，进行测试检查原始组件选项组件有对于组件需要，编写单元测试时，通过传递该参数。在状态更新后检查生成的在状态改变后和断言更新前等待一刻执行命令运行单元测试。参考单元测试测试框架实例教程

本文基于vue-webpack-boilerplate。官方推荐使用Karma+Mocha+Chai来进行单元测试。

介绍

Karma：一个测试运行器，用于启动浏览器，运行测试案例并将结果报告给我们。该工具的主要作用是将项目运行在各种主流Web浏览器进行测试。

Mocha：一个测试框架。可结合chai断言库使用。

Chai：一个测试断言库，提供了更好的断言语法。所谓断言，就是对组件做一些操作，并预言产生的结果。如果测试结果与断言相同则测试通过。Chai断言库中，to be been is that which and has have with at of same but does这些语言链是没有意义的，只是便于理解而已。

BDD英文文档

中文文档

实践 组件无依赖，无props

对于无需导入任何依赖，也没有props的，直接编写测试案例即可。

MyComponent.vue

MyComponent.spec.js

// 导入 Vue.js 和组件，进行测试
import Vue from "vue"
import MyComponent from "path/to/MyComponent.vue"

describe("MyComponent", () => {
  // 检查原始组件选项
  it("has a created hook", () => {
    expect(typeof MyComponent.created).to.eql("function")
  })
})

组件有props

对于组件需要props，编写单元测试时，通过propsData传递该参数。

MyComponent.vue

MyComponent.spec.js

import Vue from "vue"
import MyComponent from "path/to/MyComponent.vue"

function getRenderedText (Component, propsDataMsg) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData: propsDataMsg}).$mount()
  return vm.$el.textContent
}
describe("MyComponent", () => {
  it("renders correctly with different props", () => {
    expect(getRenderedText(MyComponent, {
      msg: "Hello"
    })).to.eql("Hello")
    expect(getRenderedText(MyComponent, {
      msg: "Bye"
    })).to.eql("Bye")
  })
})

组件有依赖

若组件存在依赖，则可通过inject-loader解决。inject-loader可将任意依赖项注入到*.vue组件中。

MyComponent.vue

MyComponent.spec.js

//“!!”表示禁用全局配置的所有loaders。“vue-loader?inject!”表示使用vue-loader，传入inject参数。
const ExampleInjector = require("!!vue-loader?inject!./example.vue")
//运行ExampleInjector函数返回一个MyComponent的实例，该实例中MyComponent组件的依赖项已被模拟。
const ExampleWithMocks = ExampleInjector({
  // mock it
  "../service": {
    msg: "Hello from a mocked service!"
  }
})

describe("MyComponent", () => {
  it("should render", () => {
    const vm = new Vue({
      template: "",
      components: {
        "test": ExampleWithMocks
      }
    }).$mount()
    expect(vm.$el.querySelector(".msg").textContent).to.eql("Hello from a mocked service!")
  })
})

异步操作

对于异步操作，it块执行的时候，需要传入一个回调函数，通常该函数被命名为done。当测试结束的时候，必须显式调用这个函数，告诉Mocha测试结束了。否则，Mocha就无法知道，测试是否结束，会一直等到超时报错。

// 在状态更新后检查生成的 HTML
it("updates the rendered message when vm.message updates", done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = "foo"
  // 在状态改变后和断言 DOM 更新前等待一刻
  Vue.nextTick(() => {
    expect(vm.$el.textContent).to.eql("foo")
    done()
  })
})

npm run unit

执行 npm run unit 命令运行单元测试。会产生结果列表：

若想看测试覆盖率等情况，可在test/unit/coverage查看。

注意

测试脚本都放在 test/unit/specs/ 目录下。

脚本命名方式是[组件名].spec.js。

在karma.conf.js文件里修改karma配置。

单元测试默认测试 src 目录下除了 main.js 之外的所有文件，可在 test/unit/index.js 文件中修改。

测试脚本里面应该包括一个或多个describe块，每个describe块应该包括一个或多个it块。

describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。

it块称为"测试用例"（test case），表示一个多带带的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称（"1 加 1 应该等于 2"），第二个参数是一个实际执行的函数。

Mocha在describe块之中，提供测试用例的四个钩子：before()、after()、beforeEach()和afterEach()。它们会在指定时间执行。

参考：
单元测试
Testing with Mocks
Unit Testing
测试框架 Mocha 实例教程
Chai

云服务器 GPU云服务器单元测试-mocha-jasmine 单元测试最佳实践单元-mocha-jasmine vue20开发实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88388.html

使用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增加单元

摘要：但是，项目中的一些公共封装，比如公共的组件公用的功能模块等是可以使用单元测试的。因此特为组件库引入单元测试，目的在于能减少组件的，避免重复的发布不必要的包。项目github地址：https://github.com/yuanalina/installAsRequired这里必须要提前说明，前端项目的单元测试不是必须的，特别是业务型项目，增加单元测试反而会成为累赘，增加开发成本且无意义...

happen 2019-08-23 14:53 评论0 收藏0
深入Vue3+TypeScript技术栈-coderwhy大神新课王红元

摘要：是一个测试框架，在中配合断言库实现单元测试。脚本命名方式为组件名。单元测试默认测试目录下除了之外的所有文件，可在文件中修改。回收，一般在每个测试脚本测试完成后执行回收。等元素事件名称配置项触发和事件，既触发点击事件。百度网盘提取码：u6C4在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。...

番茄西红柿 2021-11-25 09:43 评论0 收藏2637
Vue单元测试实战教程(Mocha/Karma + Vue-Test-Utils + Chai)

摘要：在前端进阶之路前端架构设计测试核心这边文章中通过分析了传统手工测试的局限性去引出了测试驱动开发的理念并介绍了一些测试工具这篇文章我将通过一个的项目去讲解如何使用且结合官方推荐的去进行单元测试的实战一安装我为本教程写一个示例库您可以直接在《前端进阶之路: 前端架构设计(3) - 测试核心》这边文章中, 通过分析了传统手工测试的局限性去引出了测试驱动开发的理念, 并介绍了一些测试工具....

RebeccaZhong 2019-08-21 18:31 评论0 收藏0
前端单元测试

摘要：为保证代码的质量，单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。以一个项目为例，代码结构如下前端测试框架主要是与，这里我们选择，断言库有以及自带的。为保证代码的质量，单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。 TDD与BDD的区别 TDD属于测试驱动开发，BDD属于行为驱动开发。个人理解其实就是TDD先写测试模块，再写主功能代码，然后能让测试模块通...

liuyix 2019-08-22 14:58 评论0 收藏0
前端单元测试（未完。。）

摘要：基础知识作用为提供浏览器测试环境，为真正测试框架，为断言库测试用例基础块称为测试套件，表示一组相关的测试。它也是一个函数，第一个参数是测试用例的名称，第二个参数是一个实际执行的函数。基础知识 karma作用为提供浏览器测试环境，mocha为真正测试框架，chai为断言库测试用例基础 describe块称为测试套件（test suite），表示一组相关的测试。它是一个函数，第一个...

ACb0y 2019-08-23 15:23 评论0 收藏0