测试框架 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()，供测试使用。