vitest | 测试框架vitest | 总结笔记

目录

测试框架 vitest 介绍

测试文件的写法

文件取名：文件名中要有 test，即  xxx.test.ts 

引入库：

test 测试：

测试运行： npx test 文件名 ，每次保存后会重新运行。

★ expect 方法：

vi 模拟相关的方法

第三方库的测试实现

目的：测试 request 函数，模拟 get 请求的对应返回，期待返回的数据能够正常出现。

 问题：在测试文件中，引入 request，模拟 vi.mock('axios')  发现 axios.get 方法上 只有几个方法——》即 axios 会缺失对应的方法

 解决：使用断言 const mockedAxios = axios as Mocked （注：mockedAxios 可以获取一个对应的类型，Mocked 是 vitest 上的）

写测试用例

mount 将组件挂载

★ mount 方法： 

报错：ReferenceError: document is not defined.

  解决：需要自己配置，让其支持dom环境。

测试事件：

---

测试框架 vitest 介绍

网址：Vitest | Next Generation testing framework

特点：①支持vite的生态系统，②兼容jest语法 ③HMR测试（速度快） ④ ESM（js的原生支持）

安装 Vitest： npm install -D vitest 

断言：查看框架是否符合预期的结果。chaijs、should、expect、assert

---

测试文件的写法

文件取名：文件名中要有 test，即  xxx.test.ts 

  每个 case 测试一个功能点

引入库：

expect 断言库、test 测试用例： import { export, test } from 'vitest' 

describe分组： import { describe } from 'vitest' 

vi 模拟： import { describe } from 'vitest' 

Mocked +断言--》可以获取一个对应的类型： import { Mocked } from 'vitest' 

test 测试：

test('测试名', () => {

  expect().toBe() ...

})

测试运行： npx test 文件名 ，每次保存后会重新运行。

★ expect 方法：

    expect().toBe()：两个严格相等（相当于===）

    .toEqual()：比里头的值是否相等（相当于==）

    .toBeTruthy() 是真，.toBeFalsy() 是假

    expect(a).toBeGreaterThan(b)：a比b大

    .toBeLessThan()：比小

调用情况：

expect().toHaveBeenCalled() ，被调用过的

expect().toHaveBeenCalledWith(参数)，期待被调用成xx参数

expect().toHaveBeenCalledTimes(次数)，调用了几次

expect().toHaveProperty('')  是否有xx属性

expect().toBeDefined()  是否存在

vi 模拟相关的方法

vi.fn() 回调函数

vi.synOn(对象, '方法名')，

vi.mock('模拟的第三方库同名')，

---

第三方库的测试实现

目的：测试 request 函数，模拟 get 请求的对应返回，期待返回的数据能够正常出现。

 写被测试的对象：发送一个请求，传入一个假的 url 。模拟get的实现，确定一个返回值 data，

 问题：在测试文件中，引入 request，模拟 vi.mock('axios')  发现 axios.get 方法上 只有几个方法——》即 axios 会缺失对应的方法

 

 解决：使用断言 const mockedAxios = axios as Mocked<typeof axios> （注：mockedAxios 可以获取一个对应的类型，Mocked 是 vitest 上的）

此时，在 .上面就不是原来的方法，而是 mockedAxios 之后得到的功能。一系列的方法，可完成对应的实现。 

 mockImplementation 手动写其实现。

快捷方法—— .get.mockResolveValue({data: 123})

.get.mockImplementation( () => Primise.resolve( {data: 123} )

  等价于

   .get.mockResolveValue({data: 123})

---

写测试用例

目的： 将组件挂载到一个地方，测试它长啥样，是否符合我们传入的属性。

mount 将组件挂载

  引入：import { mount } from '@vue/test-utils'，

  语法：mount( 组件，{ 要传入的具体内容 } )

★ mount 方法： 

mount().classes()  获取dom节点上的class

如何遍历：① mount().get('') 找不到，会测试中断； ②mount().find  找不到 不会中断。

取信息：① mount().get().html() 返 html结构; ② mount().get().text()返文本结构

mount().get().trigger('触发的事件名') 触发xx

mount().emitted()  显示当前所有触发的事件名称。

mount().attributes('属性')  对应节点的属性

mount().find('').element() 获取真正的dom节点

mount().find('').element().属性 获取真正的dom节点的某一个属性

.html()，供测试使用。

例子：

---

报错：ReferenceError: document is not defined.

 问题：需要挂载节点，就需要一个dom环境，vitest 默认环境在 node下，而node 环境没有对应的 dom 环境。

  解决：需要自己配置，让其支持dom环境。

    如何配置 vitest。默认会读取 vite.config.ts，需要重载，即 新建一个 vitest.config.ts 文件

首行添加：       ///<reference types="vitest" /> 定义重载

       将对应的配置文件 vite.config.ts 拷贝到vitest.config.ts。将不必要的删掉，如 删掉 eslint()、resolve的路径问题。

      test 里头添加:

        全局打开  globals: true

        环境  environment:'jsdom' ，打开dom环境

      运行 npx vitest Button，（其中 Button 为文件名）查看结果 

测试事件：

 触发 click，MouseEvent 原生的事件

 测试disabled：以及其点击事件出发情况。

---