Vue前端自动化测试-Vue Test Utils

Vue Test Utils简介

vue-test-utils是vue官方的单元测试框架，提供了一系列非常方便的工具，使我们更轻松地为vue构建的应用来编写单元测试。主流的JavaScript测试运行器有很多，但vue-test-utils都能支持。它是与测试运行器无关的。

环境配置

通过脚手架 vue-cli 来新建项目的时候，如果选择了 Unit Testing 单元测试且选择的是 Jest 作为测试运行器，那么在项目创建好后，就会自动配置好单元测试需要的环境。本文主要讲的就是新建项目之初没有选择单元测试功能，需要后面去添加的配置。

npm i @vue/cli-plugin-unit-jest -D

npm i @vue/test-utils -D

v3:npm i @vue/vue3-jest@^27.0.0-alpha.1 -D
v2:npm i @vue/vue2-jest@^27.0.0-alpha.2 -D

配置Jest

项目根目录创建jest.config.js文件

module.exports = {//有啥需要就在这里配置...preset: "@vue/cli-plugin-unit-jest",
};

配置package.json

  "scripts": {"test": "vue-cli-service test:unit",},

编写测试文件

项目根目录创建tests/unit/example.spec.js文件

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";describe("HelloWorld.vue", () => {it("renders props.msg when passed", () => {const msg = "new message";const wrapper = shallowMount(HelloWorld, {props: { msg },});expect(wrapper.text()).toMatch(msg);});
});

HelloWorld.vue文件

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped></style>

shallowMount 将会创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，只存根当前组件，不包含子组件。
describe(name, fn) 这边是定义一个测试套件，HelloWorld.vue 是测试套件的名字，fn 是具体的可执行的函数
it(name, fn) 是一个测试用例，输入框初始值为空字符串是测试用例的名字，fn 是具体的可执行函数；一个测试套件里可以保护多个测试用例。
expect 是 Jest 内置的断言风格，业界还存在别的断言风格比如 Should、Assert 等。
toBe 是 Jest 提供的断言方法，比如expect(1+1).toBe(2)，更多的可以到Jest Expect 查看具体用法。

执行测试命令

npm run test

Vue前端自动化测试-Vue Test Utils相关推荐

前端自动化测试——vue单元测试vue-test-utils
自动化测试分类单元测试单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.简单来说,单元就是人为规定的最小的被测功能模块,可能是一个单一函数或方法.一个完整的组件或类 ...
vue前端 html,Vue.js v-html
v-html 预期:string 详细更新元素的 innerHTML . 注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 . 如果试图使用 v-html 组合模板,可以重新考虑 ...
一篇超详细的vue项目前端自动化测试教学！
为什么需要写前端自动化大部分企业为了追求开发效率,所以并没有去强制要求员工写前端自动化测试的代码.另一部分企业则会要求前端开发额外写前端自动化测试.那么写和不写到底有哪些区别呢? 不写前端自动化测试 ...
vue的自动化测试详解
大厂视野 1.流量大性能优化 2.项目复杂源码 3.持续迭代 4.项目稳定运行自动化测试需求评审开发测试(人点)(可以使用自动化测试完成一部分) 上线 5.为什么要写测试呢测试代码可读性 ...
vue 前端png转pdf_Vue前端HTML保存为PDF的两种常用方式「干货分享」
Vue前端HTML保存为PDF常用方式有两种.使用html2Canvas和JsPDF库,转化为图片后保存PDF. 调用浏览器window.print(),然后手动保存为PDF. 第一种优点没有预览点 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
ruoyi-UI （若依）微服务版 vue前端使用及分析（2021-4-13更新）
ruoyi-UI (若依) 微服务版 vue前端版本使用及分析(2021-4-13更新) 文章目录 ruoyi-UI (若依) 微服务版 vue前端版本使用及分析(2021-4-13更新) 1. 目录 ...
Vue前端工程目录结构
project-web ├─node_modules 依赖包 ├─dist 编译文件 ├─public 静态资源目录 │ ├─res ...