vue3单元测试-初步了解

公众号：小博的前端笔记

1、创建单元测试项目

1.1、选型说明：

1、端到端测试工具需连接外网，暂时不采用。
2、采用Vitest作为单元测试，未采用jest。
- Jest 和 Vite 之间存在大量重复，迫使用户配置两个不同的管道。
- 鉴于 Jest 的广泛采用，Vitest 提供了兼容的 API，允许大多数项目中将其用作替代品。
- Vitest 旨在将自己定位为 Vite 项目的首选测试运行器，甚至成为不使用 Vite 的项目的可靠替代方案。

1.2、初体验

体验项目自带的demo

demo为组件测试

单元测试内容引入了HelloWorld组件，语法此时还不懂，但是大致可推断出给HelloWorld组件传递了props参数，然后通过warpper接收返回的值在同预测结果进行对比

arduino 复制代码

执行 npm run test:unit 命令进行单元测试

Vitest还携带热更新功能，将对比内容改为错误进行测试，如下图

2、入门

vitest官方地址为：vitest.dev/guide/

提示:

默认情况下，测试文件名中必须包含".test."或".spec."

编辑测试

例如，我们将编写一个简单的测试来验证将两个数字相加的函数作为输出。

typescript 复制代码

// testSum.ts
export function sum(a:number, b:number) {
  return a + b
}

javascript 复制代码

// testSum.spec.js
import { expect, test } from 'vitest'
import { sum } from './testSum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

执行命令后：可以看到测试了两条

和jest大多语法相同，例如jest语法如下：

配置 Vitest

Vitest 的主要优势之一是它与 Vite 的配置统一。如果存在，vitest将读取您的根目录vite.config.ts以匹配插件并设置为您的 Vite 应用程序。

我们直接看脚手架：默认存在vitest.config.ts文件并且引入了vite.config.ts文件进行集成。

配置项地址：cn.vitest.dev/config/#env... ，从此地址中可以查看支持哪些配置项以及已有配置项的作用，例如：

environment
- 类型: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string
- 默认值: 'node'
- 命令行终端: --environment=<env>

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

exclude
- 类型: string[]
- 默认值: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*']
匹配排除测试文件的 glob 规则。

脚手架直接引入了 vite.config文件中的configDefaults.exclude,我们直接看nodemodules中的源码文件进行查找

root
- 类型: string
- 命令行终端: -r <path>, --root=<path>
项目的根目录

脚手架直接设置了fileURLToPath(new URL('./', import.meta.url)):

fileURLToPath：是一个Node.js的内置函数，它将文件URL转换为本地文件系统路径。
new URL()构造函数用于创建一个URL对象