教你如何编写Vue.js的单元测试的方法

Vue.js是一个JavaScript框架,可用于构建Web应用程序的前端框架。特别是在创建复杂功能时,对于每个项目,有必要在我们的应用程序中查看所有内容,并检查它是否符合预期。然而,对于大型项目,每次新的更新后,检查每个功能将变得很麻烦。因此,我们可以创建可以一直运行的自动化测试,并保证我们的代码可以正常运行。在本文中,我们将为VueJS创建一些简单的单元测试。

要进行测试,我们将先制作一个基本的待办事项列表组件。我们将测试该列表是否正确显示,并且用户可以将新项目添加到待办事项列表中。希望在本教程结束之前,您可以编写测试,检查您的组件输出给用户,以及通过与HTML进行交互来模拟用户操作(例如通过单击按钮)。

本文中的所有代码可以在 Github下载。

搭建环境

搭建JavaScript项目可能是一个复杂的过程。有那么多库需要选择,所有这些库的目的都略有不同。幸运的是,对于VueJS,我们有vue-cli,它为我们设定了一切!您需要首先安装npm,然后可以运行以下命令:

?


1

2

npm install -g vue-cli

vue init webpack project-name

在这个阶段,你会被提示几个问题。大多数都可以直接继续,您可以选择默认选项,唯一的要求是您回答YES以包括vue-router和YES来设置Karma和Mocha的单元测试。然后安装依赖项:

?


1

2

cd project-name

npm install

这个最终命令将启动您的浏览器并打开localhost运行您的应用程序:

?


1

npm run dev

下面是对vue-cli为我们设置的一些关键依赖关系(非常重要)的简要概述,包括为我自己的项目安装的版本。

依赖

Webpack (v2.3) 是一个捆绑器,它结合了各种JavaScript,CSS,HTML(和其他)文件,使他们可以随时由客户端处理。
Babel (v6.22) 是ECMAScript 6到ECMAScript 5的编译器。这些是不同的JavaScript标准,目前的浏览器不能解析所有的ECMAScript 6,因此需要进行转换。

测试依赖关系

Karma (v1.4) 是一个测试运行器,它运行一个Web服务器,其中包含项目的应用程序代码,并对其执行测试。

Mocha (v3.2) 是JavaScript的测试框架。
Chai (v3.5) 是可以与Mocha一起使用的断言库。

在您的项目中,您应该能找到以下文件夹:build,config,node_modules,src,static和test。对本文来说,重要的是src,它将保存我们的应用程序代码并进行test。

我的第一个测试

一个好的开始需要去做一些基本工作。我们将从创建简单列表组件开始。在src/components文件夹中创建一个名为List.vue的新文件,并将以下代码放在里面:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<template>

 <div>

  <h1>My To Do List</h1>

  </br>

  <!--displays list -->

  <ul>

   <li v-for="item in listItems">{{ item }}</li>

  </ul>

 </div>

</template>

 

<script>

export default {

 name: ‘list‘,

 data () {

  return {

   listItems: [‘buy food‘, ‘play games‘, ‘sleep‘],

  }

 }

}

</script>

在组件中,列表项存储在组件数据中的数组(listItems)中。然后可以在模板中访问该数据,并在foreach循环中循环(v-for),并显示在页面上。

为了使我们的列表看起来更有趣,我们可以创建一个新的路径来显示我们的组件。进入src/router/index.js并添加路由,你的代码应该是这样的:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

import Vue from ‘vue‘

import Router from ‘vue-router‘

import Hello from ‘@/components/Hello‘

import List from ‘@/components/List‘

 

Vue.use(Router)

 

export default new Router({

 routes: [

  {

   path: ‘/‘,

   name: ‘Hello‘,

   component: Hello

  },

  {

   path: ‘/to-do‘,

   name: ‘ToDo‘,

   component: List

  },

 ]

})

现在,如果您导航到localhost:8080/#/to-do,您将在浏览器中看到您的列表效果!

首先我们要测试数据是否正确显示。在 test/unit/specs 下创建一个新的文件List.spec.js并放上如下代码:

?


1

2

3

4

5

6

7

8

9

import List from ‘@/components/List‘;

import Vue from ‘vue‘;

 

describe(‘List.vue‘, () => {

 

 it(‘displays items from the list‘, () => {

   // our test goes here

 })

})

在这个文件中,我们描述List.vue组件,我们有一个单独的空测试,它将检查它(组件)是否从列表中显示项目。这是Mocha测试的基本文件结构。

在我们的测试中,我们首先需要设置Vue组件。复制下面的代码,并将其放在注释“our test goes here”的位置:

?


1

2

3

// build component

const Constructor = Vue.extend(List);

const ListComponent = new Constructor().$mount();

我们扩展Vue然后安装我们的组件。安装组件很重要,因为这是在我们的模板中呈现HTML。这实际上意味着HTML被构建,并且我们的模板中的变量(例如{{item}})被填满数据,使得我们可以访问HTML(通过$el)。

随着我们的组件准备好,我们可以写第一个断言。在这个例子中,我们使用了‘expect‘风格,由Chai断言库提供,以及‘should‘和‘assert‘。 安装组件后放置以下代码:

?


1

2

// assert that component text contains items from the list

expect(ListComponent.$el.textContent).to.contain(‘play games‘);

如上所述,我们可以使用ListComponent.$el获取组件的HTML,并且使用ListComponent.$el.textContent只访问内部HTML(即文本)。断言是检查文本是否包含在组件数据中设置的列表项之一。

为了检查一切都能正常工作,我们可以运行测试!使用vue-cli项目,我们可以简单地输入npm run unit,这是一个别名 cross-env BABEL_ENV = test karma start test/unit/karma.conf.js --single-run。

?


1

npm run unit

如果所有的测试都已经通过,它将显示绿色,并显示成功测试和代码覆盖率报告的列表,让您知道在测试期间执行的应用程序代码的百分比。

模拟用户输入

这是一个很好的开始,但是很少有应用程序只会显示数据。我们要添加的下一个功能是让用户能够在其列表中添加新项目。为此,我们需要一个输入框,用户可以在其中键入新项目,并在按钮上添加项目到列表中。这是List.vue的更新版本:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<template>

 <div>

  <h1>My To Do List</h1>

  </br>

  <input v-model="newItem" >

  <button @click="addItemToList">Add</button>

  <!-- displays list -->

  <ul>

   <li v-for="item in listItems">{{ item }}</li>

  </ul>

 </div>

</template>

 

<script>

export default {

 name: ‘test‘,

 data () {

  return {

   listItems: [‘buy food‘, ‘play games‘, ‘sleep‘],

   newItem: ‘‘

  }

 },

 methods: {

   addItemToList() {

    this.listItems.push(this.newItem);

    this.newItem = ‘‘;

   }

 }

}

</script>

使用v-model,输入框的值绑定到存储在组件数据中的newItem变量。当单击按钮时,将执行addItemToList函数,将newItem添加到列表数组中,并清除newItem,以便可以将更多的内容添加到列表中。

要开始测试此功能,请在List.spec.js中创建一个新的空测试,并添加测试代码:

?


1

2

3

it(‘adds a new item to list on click‘, () => {

  // our test goes here

})

首先我们要构建我们的组件,并模拟一个用户在输入框中输入的内容。由于VueJS将输入框的值绑定到newItem变量,所以我们可以简单地将我们的值设置为newItem。

?


1

2

3

4

5

6

// build component

const Constructor = Vue.extend(List);

const ListComponent = new Constructor().$mount();

 

// set value of new item

ListComponent.newItem = ‘brush my teeth‘;

接下来我们需要点击按钮。我们必须在HTML中找到这个按钮,它可以使用$el。只有这一次,我们才可以使用querySelector来查找实际的元素。可以使用它的类(.buttonClass),其id(#buttonId)或元素的名称(button)来找到一个元素。

?


1

2

// find button

const button = ListComponent.$el.querySelector(‘button‘);

为了模拟一个点击,我们需要将按钮传递给一个新的事件对象。在测试环境中,List组件不会监听任何事件,因此我们需要手动运行监视器。

?


1

2

3

4

// simulate click event

const clickEvent = new window.Event(‘click‘);

button.dispatchEvent(clickEvent);

ListComponent._watcher.run();

最后,我们需要检查newItem是否显示,我们已经知道如何从第一个测试中完成!我们可能还想检查newItem是否存储在列表数组中。

?


1

2

3

//assert list contains new item

expect(ListComponent.$el.textContent).to.contain(‘brush my teeth‘);

expect(ListComponent.listItems).to.contain(‘brush my teeth‘);

以下是完整的测试文件:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

import List from ‘@/components/List‘;

import Vue from ‘vue‘;

 

describe(‘List.vue‘, () => {

 it(‘displays items from the list‘, () => {

  const Constructor = Vue.extend(List);

  const ListComponent = new Constructor().$mount();

  expect(ListComponent.$el.textContent).to.contain(‘play games‘);

 })

 

 it(‘adds a new item to list on click‘, () => {

  // build component

  const Constructor = Vue.extend(List);

  const ListComponent = new Constructor().$mount();

 

  // set input value

  ListComponent.newItem = ‘brush my teeth‘;

 

  // simulate click event

  const button = ListComponent.$el.querySelector(‘button‘);

  const clickEvent = new window.Event(‘click‘);

  button.dispatchEvent(clickEvent);

  ListComponent._watcher.run();

 

  // assert list contains new item

  expect(ListComponent.$el.textContent).to.contain(‘brush my teeth‘);

  expect(ListComponent.listItems).to.contain(‘brush my teeth‘);

 })

})

现在我们可以再次运行我们的测试,应该会显示绿色!

希望这段代码对你来说能够很清楚,但是它不是特别容易理解,特别是对于第一次进行VueJS测试的人来说。有一个VueJS实用程序库,其中包含了一些更复杂的外观代码。要使用它,我们可以转到我们的项目根目录并运行以下命令:

?


1

npm install avoriaz

现在我们可以隐藏mount()之后的Vue组件的设置,并且为了单击按钮,我们需要的是两行代码:find()该按钮和dispatch() )点击事件。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

import { mount } from ‘avoriaz‘;

import List from ‘@/components/List‘;

import Vue from ‘vue‘;

 

describe(‘List.vue‘, () => {

 // previous tests ..

 

 it(‘adds new item to list on click with avoriaz‘, () => {

    // build component

  const ListComponent = mount(List);

 

  // set input value

  ListComponent.setData({

   newItem: ‘brush my teeth‘,

  });

 

  // simulate click event

  const button = ListComponent.find(‘button‘)[0];

  button.dispatch(‘click‘);

 

  // assert list contains new item

  expect(ListComponent.text()).to.contain(‘brush my teeth‘);

  expect(ListComponent.data().listItems).to.contain(‘brush my teeth‘);

 })

})

总结

我个人认为写作测试对于我的正常工作流程至关重要,但是使用JavaScript,特别是VueJS,我开始碰到一些麻烦。希望本教程将帮助任何与我一样遇到麻烦的人!

本文中的所有代码可以在 Github下载。

 
Typescript视频教程  ...2
node基础入门+就业实战视频教程+源码
珠峰Node.js全栈开发  ...2
爱创课堂—web 前端视频教程
基于MUI的原生API调用跨平台APP开发入门与实战全套完整版  ...2
手把手教你做爬虫---基于NodeJs
前端大牛第一步源码分析及修Bootstrap框架
NodeJs+mongodb全栈工程师实战聊天系统
2017 最新JavaScript初级+中级+ 高级+面试全套视频教程  ...2
2017最新彻底征服React Native跨平台APP实战京东商城项目实战视频教程+源码  ...2
基于nodejs爬虫的信息采集并展示的桌面APP
2017最新 阿里前技术专家十三年编程老司机 带你彻底征服JavaScript  ...2345
2017全新全栈高级工程师实战课程Vue+Node+MongoDB(完结) 
Vue 实战 APP 之番薯 在线观看
2017 最新JavaScript初级+中级+ 高级+面试全套视频教程
NodeJs+mongodb全栈工程师实战聊天系统视频教程 
东方耀 手把手教React Native实战开发视频教程+源码笔记 1-237集  ...2
HTML5高级前端视频教程
Vue.JS多套精华视频教程合集 Web界面框架Vue.JS 五套中文+英文视频教程+资料
Angular 4.0从入门到实战 打造股票管理网站 

原文地址:https://www.cnblogs.com/winifredaf/p/10012876.html

时间: 2024-10-10 10:52:28

教你如何编写Vue.js的单元测试的方法的相关文章

Vue.js 初识

Vue核心库只关注视图层,它不仅易于上手,还便于与第三方或既有项目整合. 前置知识: html+css的基础知识 Javascript的基础知识 node.js初级知识 实践体验: 轻量级的框架 性能优秀 MVVM模式 首先引入Vue.js 通过官方网站:http://vuejs.org/下载Vue.js 编写Vue.js的第一个程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

MPVUE - 使用vue.js开发微信小程序

MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行. 简单上手mpvue 官方提供了一套quickstart模板. vue init mpvue/mpvue-quickstart my-project 安装好依赖之后,执行npm run dev,将会将小程序文件打包进dis

vue.js的快速入门使用

1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: ? 中文:https://cn.vuejs.org/ ? 英文:https://vuejs.org/ 官方文档:https://cn.vuejs.org/v2/guide/ vue.js目前有1.x.2.x和3.x 版本,我们学习2.x版本的. 1.2 vue.js库的基本使用

为什么我们从Angular 2迁移到Vue.js(为什么我们没有选择React)

在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本.经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定.8个月前,我们的前端在使用Angular 2.确切地说,它使用的是Angular 2 beta 9.这是一个由外包公司编写的产品,我们从很多层面上都没有完全满意,从UX / UI到架构,在某种程度上,与Angular 2本身有很大的关系. 在之前,我承认Angular 2 beta 9是与Angular 2.0不同的产品,

Vue.js 2.0 轻松入门(一)

Vue - 渐进式 JavaScript 框架 介绍 Vue.js 是什么 vue.js 是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 渐进式框架 Vue 分层设计,每层都可灵活的接入其他方案. Declarative Rendering -- 声明式渲染 Component System -

Vue.js 是什么

Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框

vue.js中$watch的用法示例

Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; 1 <template> 2 //观察数据为字符串或数组 3 <input v-model="example0"/> 4 <input v-model="example1"/> 5 /当单观察数据examples2为对象时,如

vue.js基础知识篇(2):指令详解

第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性

vue.js 常用语法总结(一)

作者:曾萍,目前就职于京东商城. 概述 2016年已经结束了.你是否会思考一下,自己在过去的一年里是否错过一些重要的东西?不用担心,我们正在回顾那些流行的趋势.通过比较过去12个月里Github所增加的star数,我们利用bestof.js.org分析所涉及的项目技术,发现2016最流行项目有以下这些:图片通过比较去年最火的10个项目,你可以总览2016的web前端技术发展,会发现:Vue.js在去年获得了超过25000个star,这意味着每天有72个star,超过了包含React以及Angul