从0搭建Vue3组件库(十二):引入现代前端测试框架 Vitest

简介: 从0搭建Vue3组件库(十二):引入现代前端测试框架 Vitest

image.png

Vitest 是个高性能的前端单元测试框架,它的用法其实和 Jest 差不多,但是它的性能要优于 Jest 不少,还提供了很好的 ESM 支持,同时对于使用 vite 作为构建工具的项目来说有一个好处就是可以公用同一个配置文件vite.config.js。因此本项目将会使用 Vitest 作为测试框架。


安装



因为我们测试的前端组件库是运行在浏览器上的,所以我们需要额外安装happy-dom,同时我们还需要安装展示测试覆盖率工具c8

pnpm add vitest happy-dom c8 -D -w


配置



上面提到过,Vitest 的配置可以直接在vite.config.ts中配置,所以我们来到components/vite.config.ts中对 Vitest 做一个相关配置(三斜线命令告诉编译器在编译过程中要引入的额外的文件)

/// <reference types="vitest" />
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"
...
export default defineConfig(
    {
        ...
        test: {
            environment: "happy-dom"
        },
    }
)

然后我们在package.json中增加两个命令vitestvitest run --coverage,分别是进行单元测试和查看单元测试覆盖情况

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

此时我们便可以使用 Vitest 进行测试了,在执行test命令时,Vitest 会执行**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}的文件,这里我们的测试文件统一命名为**/*.{test}.ts的形式并放在每个组件的__tests__目录下

比如在 button 目录下新建__tests__/button.test.ts目录,然后写一个简单的测试代码看一下效果如何

import { describe, expect, it } from 'vitest';
describe('helloeasyest', () => {
  it('should be helloeasyest', () => {
    expect('hello' + 'easyest').toBe('helloeasyest');
  });
});

然后在components目录下执行pnpm run test就可以看到我们的测试通过了

image.png

然后执行pnpm run coverage可以看到我们测试覆盖情况

image.png

其中它们每个字段代表的含义如下

  • %stmts 是语句覆盖率(statement coverage):是不是每个语句都执行了?
  • %Branch 分支覆盖率(branch coverage):是不是每个 if 代码块都执行了?
  • %Funcs 函数覆盖率(function coverage):是不是每个函数都调用了?
  • %Lines 行覆盖率(line coverage):是不是每一行都执行了?


如何测试组件?



上面我们只是简单测试了一个字符串相加,但是我们需要测试的是组件库,那么如何测试我们的组件是否复合要求呢?

因为我们项目是 vue 组件库,因此我们可以安装 Vue 推荐的测试库@vue/test-utils

pnpm add @vue/test-utils -D -w

然后我们修改一下button.test.ts,我们来测试一下 Button 组件的 slot

import { describe, expect, it } from 'vitest';
import { mount } from '@vue/test-utils';
import button from '../button.vue';
// The component to test
describe('test button', () => {
  it('should render slot', () => {
    const wrapper = mount(button, {
      slots: {
        default: 'easyest'
      }
    });
    // Assert the rendered text of the component
    expect(wrapper.text()).toContain('easyest');
  });
});

@vue/test-utils提供了一个mount方法,我们可以传入不同参数来测试组件是否复合我们的预期,比如上面测试代码的含义是:传入 button 组件,并将其默认 slot 设置为easyest,我们期望页面加载的时候文本会展示easyest,很显然我们的 button 组件是有这个功能的,所以我们执行pnpm run test的时候这条测试就通过了

image.png

如果我们想测试 Button 组件传入 type 展示某个样式的时候可以这样写

import { describe, expect, it } from 'vitest';
import { mount } from '@vue/test-utils';
import button from '../button.vue';
// The component to test
describe('test button', () => {
  it('should render slot', () => {
    const wrapper = mount(button, {
      slots: {
        default: 'easyest'
      }
    });
    // Assert the rendered text of the component
    expect(wrapper.text()).toContain('easyest');
  });
  it('should have class', () => {
    const wrapper = mount(button, {
      props: {
        type: 'primary'
      }
    });
    expect(wrapper.classes()).toContain('ea-button--primary');
  });
});

这条测试的含义是:当我们传入的type为primary的时候,期望组件的类名为ea-button--primary,很显然这条也是可以通过的,同时这时候你会发现我们刚刚启动的测试自己自动更新了,说明Vitest是具有热更新功能的

image.png

关于@vue/test-utils更多功能感兴趣的可以点击@vue/test-utils查看官方文档

ok,关于Vitest的引入就介绍到这里了,如果你对搭建Vue组件库感兴趣的话可以关注专栏Vite+TypeScript从零搭建Vue3组件库


目录
打赏
0
1
0
1
16
分享
相关文章
探索软件测试中的自动化测试框架选择与优化策略
本文深入探讨了在现代软件开发流程中,如何根据项目特性、团队技能和长期维护需求,精准选择合适的自动化测试框架。
156 11
AxBench:斯坦福大学推出评估语言模型控制方法的基准测试框架
AxBench 是由斯坦福大学推出,用于评估语言模型可解释性方法的基准测试框架,支持概念检测和模型转向任务,帮助研究者系统地比较不同控制技术的有效性。
35 5
AxBench:斯坦福大学推出评估语言模型控制方法的基准测试框架
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
56 10
pytest接口自动化测试框架搭建
通过上述步骤,我们成功搭建了一个基于 `pytest`的接口自动化测试框架。这个框架具备良好的扩展性和可维护性,能够高效地管理和执行API测试。通过封装HTTP请求逻辑、使用 `conftest.py`定义共享资源和前置条件,并利用 `pytest.ini`进行配置管理,可以大幅提高测试的自动化程度和执行效率。希望本文能为您的测试工作提供实用的指导和帮助。
115 15
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
571 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Kali Linux系统Metasploit框架利用 HTA 文件进行渗透测试实验
本指南介绍如何利用 HTA 文件和 Metasploit 框架进行渗透测试。通过创建反向 shell、生成 HTA 文件、设置 HTTP 服务器和发送文件,最终实现对目标系统的控制。适用于教育目的,需合法授权。
92 9
Kali Linux系统Metasploit框架利用 HTA 文件进行渗透测试实验
|
2月前
|
Metasploit Pro 4.22.6-2024111901 (Linux, Windows) - 专业渗透测试框架
Metasploit Pro 4.22.6-2024111901 (Linux, Windows) - 专业渗透测试框架
64 9
Metasploit Pro 4.22.6-2024111901 (Linux, Windows) - 专业渗透测试框架
探索软件测试中的自动化测试框架
本文深入探讨了自动化测试在软件开发中的重要性,并详细介绍了几种流行的自动化测试框架。通过比较它们的优缺点和适用场景,旨在为读者提供选择合适自动化测试工具的参考依据。
自动化测试框架的设计与实现
在软件开发周期中,测试是确保产品质量的关键步骤。本文通过介绍自动化测试框架的设计原则、组件构成以及实现方法,旨在指导读者构建高效、可靠的自动化测试系统。文章不仅探讨了自动化测试的必要性和优势,还详细描述了框架搭建的具体步骤,包括工具选择、脚本开发、执行策略及结果分析等。此外,文章还强调了持续集成环境下自动化测试的重要性,并提供了实际案例分析,以帮助读者更好地理解和应用自动化测试框架。
探索软件测试中的自动化测试框架选择与实施###
本文不概述传统意义上的摘要内容,而是直接以一段对话形式引入,旨在激发读者兴趣。想象一下,你是一名勇敢的探险家,面前摆满了各式各样的自动化测试工具地图,每张地图都指向未知的宝藏——高效、精准的软件测试领域。我们将一起踏上这段旅程,探讨如何根据项目特性选择合适的自动化测试框架,并分享实施过程中的关键步骤与避坑指南。 ###
63 4

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等