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 端应用,你可以使用 jsdomhappy-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对象
相关推荐
快起来别睡了19 分钟前
Vue 3 中的 Watch、WatchEffect 和 Computed:深入解析与案例分析
vue.js
盏茶作酒2938 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
Rainbow_Pearl1 小时前
Vue2_element 表头查询功能
javascript·vue.js·elementui
熊出没2 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN2 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
江城开朗的豌豆3 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
江城开朗的豌豆4 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
架构个驾驾4 小时前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
梨子同志4 小时前
Vue 生命周期
前端·vue.js
梨子同志4 小时前
Vue 组件通信详解
前端·vue.js