Vue3+element-plus+vite 组件的二次封装-- 添加vue项目单元测试（vitest+happy-dom+testing-library）

本人是一个web前端开发工程师，主要是vue框架，整理了一些Vue常用的技术，一方面是分享，一方面是做总结，今后也会一直更新，有好建议的同学欢迎评论区分享 ;-）

序号	文章
0	组件库展示
1	通过JSON配置–头部搜索条件的封装组件
2	通过JSON配置–表单Table的封装组件
3	页脚的封装组件
4	通过JSON配置–Form表单的封装组件
5	生成npm组件库
6	发布到npm
7	vitest为组件库添加单元测试
8	vuepress为组件库生成文档
9	通过github或者gitee pages将组件库文档发布到线上，免费！
10	源码地址

---

---

组件库开发流程

Vue组件库专栏会按顺序执行一下流程，不断完善组件库开发流程

1. Vue3+element-plus+vite 组件的二次封装，封装了头部的搜索条件栏，tabel栏，分页栏，form表单，都设置成了通过json可配置项，方便复用；
2. 封装好了就开始打包，并且进行本地测试；
3. 组件库发布到npm；
4. 添加vitest单元测试框架；（本章）
5. 添加vuepress文档。

---

0. 简介

1. vitest 跟 jest 是单元测试框架，他们只能在nodejs环境中测试；
2. happy-dom 跟 jsdom 是一个没有图形用户界面的web浏览器的JavaScript实现；
3. @vue/test-utils 是官方的底层组件测试库，用来提供给用户访问 Vue 特有的 API。@testing-library/vue （vue官方推荐使用~）也是基于此库构建的。

大概流程vue组件，经过@testing-library/vue 搭建vue测试Web ，经过happy-dom 转化为js，供vitest进行测试...

vue官网测试讲解：点击此处
vue官网组件测试：点击此处
vitest官网：点击此处
testing-library官网：点击此处

很多同学不知道一个组件可以测试什么，其实官网已经给我们提示了，我们不需要知道内部是怎么实现的，不需要理会组件内部私有方法以及属性。

• 对于 视图 的测试：根据输入 prop 和插槽断言渲染输出是否正确。
• 对于 交互 的测试：断言渲染的更新是否正确或触发的事件是否正确地响应了用户输入事件。

---

1. 安装依赖

在penk-ui项目中直接安装vitest

npm install -D vitest happy-dom @testing-library/vue

Vitest 需要 Vite >=v3.0.0 和 Node >=v14

---

2. 配置 Vitest

vite.config.ts 中配置 Vitest
Vitest 的主要优势之一是它与 Vite 的统一配置。
以下按优先级排列：

1. vitest.config.ts ，优先级将会最高。
2. 将 --config 选项传递给 CLI，例如 vitest --config ./path/to/vitest.config.ts。
3. 如果都没有就会找vite.config.ts，读取里面配置。本章节直接在vite.config.js 配置

---

2.1 添加三斜线指令

官方文档：点击此处

三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。 它用于声明文件间的 依赖。

在vite.config.ts 文件头部添加：

/// <reference types="vitest" />

---

2.2 在defineConfig 中添加test 子对象

2.2.1 test.include

官方文档：点击此处

默认配置：整个根目录下所有符合一下命名规则条件的文件
咋们这边用xxx.test.ts，所以也不用配置了…

由于配置，vitest 会遍历项目所有符合文件命名的文件进行测试，当然vitest 还可以支持在您的代码中进行测试，这个就是 ***源码内联测试***

官方文档：点击此处

---

2.2.2 test.environment

官方文档：点击此处

Vitest 中的默认测试环境是一个 Node.js 环境。如果你正在构建 Web 端应用程序，你可以使用 jsdom 或 happy-dom 这种类似浏览器(browser-like)的环境来替代 Node.js。

这边就直接配置environment，使用的是happy-dom

/// <reference types="vitest" />
import { defineConfig } from "vitest/config";
export default defineConfig({
	// ... 你的其他配置
   test:{
    environment:"happy-dom"
  },
});

---

2.3 pagage.json配置指令

{
  "scripts": {
  	// ...
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

---

2.4 测试效果

到此就可以了，证明程序跑的起来，接下来就是来编写测试用例即可…

---

3. 开始测试

3.1 纯JS 测试套件

3.1.1 新建目录

---

3.1.2 新建源文件 add.ts

/*
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-23 12:08:22
 * @FilePath: \penk-ui\src\utils\add.ts
 * @email: 492934056@qq.com
 */

export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0);
}

---

3.1.3 新建测试文件 add.test.ts

/*
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-23 12:09:47
 * @FilePath: \penk-ui\src\utils\add.test.ts
 * @email: 492934056@qq.com
 */
import { describe, it, expect } from "vitest";
import { add } from "./add";

describe("add", () => {
  it("add1", () => {
    expect(add()).toBe(0);
  });
  it("add2", () => {
    expect(add(1)).toBe(1);
  });
  it("add3", () => {
    expect(add(1, 2, 3)).toBe(6);
  });
});

---

3.1.4 测试效果

npm run test

---

3.2 二次封装UI组件测试套件

这次是UI组件测试是建立在之前的二次封装组件的，这次以PenkSelect.vue 来编写测试用例
PenkSelect文章：点击此处跳转

---

3.2.1 新建测试文件 PenkSearch.test.ts

这边只是简单的进行文字测试~~~ 后期再逐渐完善，主要是不熟这块，有经验的老铁评论区交流一起学习进步：）

/*
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-28 11:32:23
 * @FilePath: \penk-ui\src\components\PenkSearch\PenkSearch.test.ts
 * @Desc: 这边引用了PenkSelect，但是没有加载elementPlus... 所以会报错
 *        If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
 * @email: 492934056@qq.com
 */
import PenkSearch from "./PenkSearch.vue";
import { render, screen, fireEvent } from "@testing-library/vue";

test("penkSearch Bar has input item", async () => {
  // The `render` method renders the component into the document.
  // It also binds to `screen` all the available queries to interact with
  // the component.
  const placeholder = "请输入姓名";
  const label = "姓名";
  render(PenkSearch, {
    props: {
      searchConfig: [
        {
          type: "input",
          label: label,
          placeholder: placeholder,
          width: 150,
          prop: "userName",
        },
      ],
    },
  });

  // 判断是否会显示label，PenkSelect后面是追加了中文冒号 ：
  expect(screen.getByText(label + "："));
  // 判断是否存在placeholder
  let input = screen.getByPlaceholderText(placeholder);
  expect(input).toBeTruthy();

  // fireEvent.change(input, {target: {value: 'penk'}})
});

3.2.2 测试效果

npm run test

显示的话是测试通过

但是，由于组件是靠全局引入了第三方elementPlus 库，所以出现如下：
有知道怎么处理的老铁吗...

4. 查看测试覆盖率

npm run coverage

会在根目录下新建了一个文件夹，里面存放index.html

打开index.html

可以发现这里是显示测试覆盖率的，一共两个文件，add.test.ts 对应的覆盖率是100%，PenkSelect.test.ts 覆盖率不足，点击红色箭头

再点红色箭头

这里会给你提示，你的组件测试，哪里没有覆盖到，完善即可…