前端自动化测试Vue中TDD和单元测试示例详解

1、简单用例入门

Vue 提供了 @vue/test-utils 来帮助我们进行单元测试,创建 Vue 项目的时候勾选测试选项会自动帮我们安装

先来介绍两个常用的挂载方法:

  • mount:会将组件以及组件包含的子组件都进行挂载
  • shallowMount:浅挂载,只会挂载组件,忽略子组件

再来看一个简单的测试用例:

1

2

3

4

5

6

7

8

9

10

11

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, {

      propsData: { msg }

    });

    expect(wrapper.props("msg")).toBe(msg);

  });

});

shallowMount 会返回一个 wrapper,这个 wrapper 上面会包含很多帮助我们测试的方法,参考:v1.test-utils.vuejs.org/zh/api/wrap…

2、快照测试

测试用例写法如下: 第一次测试会保存 wrapper 的快照,第二次会比较当前 wrapper 和快照的区别

1

2

3

4

5

6

7

8

9

describe("HelloWorld.vue", () => {

  it("renders props.msg when passed", () => {

    const msg = "new message";

    const wrapper = shallowMount(HelloWorld, {

      propsData: { msg }

    });

    expect(wrapper).toMatchSnapshot();

  });

});

3、覆盖率测试

覆盖率测试是对测试完全程度的一个评估,测试覆盖到的业务代码越多,覆盖率越高

在 jest.config.js 中我们可以设置 collectCoverageFrom,来设置需要进行覆盖率测试的文件

我们可以测试所有的 .vue 文件,忽略 node_modules 下所有文件

要注意,在 Vue 中配置 jest,参考:v1.test-utils.vuejs.org/zh/guides/#…

然后添加一条 script 命令,就能进行测试了:

1

"test:unit": "vue-cli-service test:unit --coverage"

执行命令会生成 coverage 文件夹,Icov-report/index.html 里会可视化展示我们的测试覆盖率

4、结合 Vuex 进行测试

如果我们在组件中引入了 Vuex 状态或者使用了相关方法

在测试用例里,挂载组件的时候只需要传入 vuex 的 store 即可

1

2

3

4

import store from "@/store/index";

const wrapper = mount(HelloWorld, {

  store

});

​现在我也找了很多测试的朋友,做了一个分享技术的交流群,共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源,没人解答问题,坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化,性能,安全,测试开发等等方面有一定建树的技术大牛
分享他们的经验,还会分享很多直播讲座和技术沙龙
可以免费学习!划重点!开源的!!!
qq群号:485187702【暗号:csdn11】

最后感谢每一个认真阅读我文章的人,看着粉丝一路的上涨和关注,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走! 希望能帮助到你!【100%无套路免费领取】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/229094.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

潮落云起:中国云桌面的产业变局

云桌面,又被称为桌面云、桌面虚拟化技术。这项技术的起源可以追溯到20世纪70年代,IBM通过一台计算机来实现多用户资源的桌面共享。在数十年的发展中,云桌面从技术实现方式到产品形态日趋丰富。 相比于传统PC数据单独存放、系统独立运维的分散…

2023年12月8日:UI登陆界面

作业 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMovie> #include <QPushButton> #include <QDebug>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpub…

DeepIn,UOS统信专业版安装运行Java,JavaFx程序

因为要适配国产统信UOS系统&#xff0c;要求JavaFx程序能简便双击运行&#xff0c;由于网上UOS开发相关文章少&#xff0c;多数文章没用&#xff0c;因此花了不少时间&#xff0c;踩了不少坑&#xff0c;下面记录一些遇到的问题&#xff0c;我的程序环境是jdk1.8&#xff0c;为…

vue项目新增弹窗打开时:其中邮箱和密码被默认设置为当前登录的账号和密码

解决方法&#xff1a;就是在input的前后分别再添加一个input&#xff08;注意截图顺序不能错{密码放前面、邮箱放后面}&#xff09;

2024最新金三银四软件测试面试题

一直以来大大小小参与过不少面试&#xff0c;遇到过不少坑&#xff0c;但是没来的及好好总结汇总下。现在把之前遇到的问题汇总下&#xff0c;希望以后自己能加深印象。 1、appium 怎么定位toast弹框 appium1.6以后回答需要升级u2进行定位。 2、什么是事务&#xff0c;知道事…

Filed II 绘制超声 3D/2D 点扩散函数

点扩散函数可以较好地描述超声对成像目标分辨能力,利用 filed II 仿真工具实现点扩算函数 PSF 的 3D 和 2D 绘制。 定义换能器基本参数 f0=5e6; % Transducer center frequency [Hz] fs=100e6; % Sampling frequency [Hz] c=1540; % Speed of sound [m/s] width=0.15/1000

MYSQL练题笔记-高级查询和连接-这系列最后一题以及下个系列(子查询)的第一题

今天做了下面两题&#xff0c;到第三题的时候想了下但是没有太多的思路&#xff0c;然后看题解的时候实在是觉得自己不会&#xff0c;打算明天看吧。 1.按分类统计薪水相关的表和题目如下 我是想着简化问题&#xff0c;先找出薪水低于30000的员工&#xff0c;然后找这些员工的上…

Anaconda建虚拟环境并在jupyter中打开

1.假设要用yaml格式创建虚拟环境 从开始里打开anaconda powersheel 输入以下 conda env create -f environment.yaml conda activate env_name activate以下虚拟环境 修改名称 如果不用yaml也可以用 conda create --name my_first_env python3.6 这个来指定 2.(base)变(…

DHTMLX Scheduler PRO 6.0.5 Crack

功能丰富的 JavaScript调度程序 DHTMLX Scheduler 是一个 JavaScript 日程安排日历&#xff0c;具有 10 个视图和可定制的界面&#xff0c;用于开发任何类型的日程安排应用程序。 DHTMLX JS 调度程序库的主要特性 我们的 JS 调度程序最需要的功能之一是时间轴视图。借助时间轴…

Docker安装postgres最新版

1. postgres数据库 PostgreSQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它是一种高度可扩展的、可靠的、功能丰富的数据库系统。以下是关于PostgreSQL的一些介绍&#xff1a; 开源性&#xff1a;PostgreSQL是一个开源项目&#xff0c;可以…

线性代数入门与学习笔记

该内容为重拾部分线性代数知识的学习笔记&#xff0c;内容上更多的是为了解决问题而学习的内容&#xff0c;并非系统化的学习。 针对的问题为&#xff1a;Music算法推导求解过程中的矩阵计算知识。 学习的内容包括&#xff1a;矩阵原理、矩阵行列式、矩阵的秩、线性变换矩阵变换…

【VSAN数据恢复】节点raid硬盘离线导致vsan分布式存储不可用的数据恢复案例

VSAN数据恢复环境&#xff1a; 4个节点服务器组建vsan集群。每个节点服务器上有2组分别由6块硬盘组建的raid阵列&#xff0c;上层是虚拟机文件。 VSAN故障情况&#xff1a; vsan集群某一个节点服务器上的一组raid阵列中的一块硬盘离线&#xff0c;安全机制启动&#xff0c;开始…

PVE系列-LVM安装MacOS的各个版本及VNC加密隧道访问

PVE系列-LVM安装MacOS的各个版本 环境配置大概过程&#xff1a;详细步骤&#xff1a;1.建立安装环境和下载安装工具2. 重启后&#xff0c;执行osx-setup配置虚拟机3. 安装到硬盘&#xff0c;4.设定引导盘&#xff0c;以方便自动开机启动5.打开屏幕共享和系统VNC6.VNC加密的ssh隧…

ArkTS语言难吗?鸿蒙指南

HarmonyOS的开发语言是ArkTS、JS(JavaScript)。 ArkTS简介 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;继承了TS的所有特性&#xff0c;是TS的超集。因此&#xff0c;在学习…

C语言精选——选择题Day39

第一题 1. 有下面的定义&#xff0c;则 sizeof(s) 为多少&#xff1f; char *s "\ta\017bc"; A&#xff1a;9 B&#xff1a;5 C&#xff1a;6 D&#xff1a;7 答案及解析 C 本题涉及到了转义字符 \t 是水平制表符&#xff0c;算一个字节 \017 是表示八进制数&#…

面试总被问高并发负载测试,你真的会么?

本文将介绍使用50K并发用户测试轻松运行负载测试所需的步骤&#xff08;以及最多200万用户的更大测试&#xff09;。 ❶ 写你的剧本 ❷ 使用JMeter在本地测试 ❸ BlazeMeter SandBox测试 ❹ 使用一个控制台和一个引擎设置每引擎用户数量 ❺ 设置和测试群集&#xff08;一个…

Python 数据分析:日期型数据的玩转之道

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在数据分析的领域中&#xff0c;处理日期型数据是至关重要的一环。Python 提供了丰富的工具和库&#xff0c;使得对日期进行分析、处理、可视化变得更加轻松。本文将深入探讨 Python 中如何玩转日期型数据&#…

智能优化算法应用:基于猎食者算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于猎食者算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于猎食者算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.猎食者算法4.实验参数设定5.算法结果6.参考文献7.…

Unity中Batching优化的静态合批

文章目录 前言一、静态合批的规则1、模型使用同一个材质2、勾选静态合批3、对于静态合批后的Mesh顶点总数&#xff0c;不超过2^16^即可以使用同一批次&#xff0c;超过则会开启一个新的批次4、对与使用同一材质的不同模型间&#xff0c;纹理贴图的问题&#xff0c;我们可以通过…

腾讯云CODING全面支持云平台开发者生态

前言&#xff1a; 在技术革新迅速的当下&#xff0c;国内云厂商也意识到要打造拥抱开发者的云平台。如何以发展的眼光建设开发者产品与服务、或者说在软件工程领域如何演进&#xff1f;是值得思考的课题 正文&#xff1a; -----------------------云厂商向服务开发者转型---…