Vitest

Vitest 是一个由 Vite 提供支持的极速单元测试框架。

Vitest 与 Jest 兼容，并提供开箱即用的 ESM、Typescript 和 JSX 支持，并且由 esbuild 提供支持。它使用 Vite 开发服务器在测试期间转换您的文件并监听您的应用程序的相同配置（通过vite.config.js），从而消除使用 Jest 等测试替代方案所涉及的重复。

Vitest 旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案。

Vite 而且它拥有许多插件和集成框架，从而慢慢形成一个活跃的生态社区。

由于 Jest 的大规模使用，Vitest 提供了与之兼容的API，允许大家在大多数项目中将其作为备选使用。同时还包括了单元测试时最常见的功能（模拟，快照以及覆盖率）。Vitest 非常注重性能，尽可能多地使用 Worker 线程进行并发运行。并且在一些端口的测试运行速度提高了一个数量级别。

配置 Vitest

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

如果要配置 vitest 本身，请在你的 Vite 配置中添加 test 属性。

在安装了 Vitest 的项目中，你可以在 npm 脚本中使用 vitest 脚本，或者直接使用 npx vitest 运行它。

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

要在不监视文件更改的情况下运行一次测试，请使用 vitest run。默认情况下修改测试文件里面的内容会重新执行的。

快速上手

准备一个测试的方法，我现在把我 index.js 文件写的方法导出。

export function sum (a, b) {
  return a + b
}

创建文件 qs.sepc.js ，开始编写我们的单元测试。

// 测试用例的写法
import { expect, test } from 'vitest'
import { sum } from '../src/utils'
 
 
test('测试sum函数', () => {
  expect(sum(1, 2)).toBe(3)
})

然后运行代码 npm run test，生成测试报告。

匹配器

相当，不相等，包含，等等，匹配的关系

// describe表示分组，分组里面一个个的用例
describe('测试基本方法', () => {
  it('测试sum函数', () => {
    expect(sum(1, 2)).toBe(3)
  })
  it('测试1+1=2', () => {
    expect(1 + 1).toBe(2)
  })
  it ('对象比较', () => {
    expect({name: 1}).toEqual({name: 1})
  })
})
 
 
it('测试不相等', () => {
  expect(1+1).not.toBe(3) // 1+1不等3
  expect(3).toBeLessThan(5) // 3<5
})
 
 
it('测试包含', () => {
  expect('hello').toContain('h')
  expect('hello').toMatch(/h/)
})

测试异步

// 回调
export const getDataCallback = fn => {
  setTimeout(() => {
    fn({name: 'callback'})
  }, 1000);
}
 
 
// promise
export const getDataPromise = fn => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({name: 'callback'})
    }, 1000);
  })
}

import { getDataCallback, getDataPromise } from '../index'
 
 
// 异步回调（jest支持，但是Vitest不支持）
it('测试回调函数', (done) => {
  getDataCallback((data) => {
    expect(data).toEqual({ name: 'callback' })
    done() // 标识调用完成
  })
})
 
 
it('测试promise', () => {
  // 返回的promise会等待完成
  return getDataPromise().then(data => {
    expect(data).toEqual({ name: 'callback' })
  })
})
 
 
it('测试promise', async () => {
  // 使用await语法
  const data = await getDataPromise()
  expect(data).toEqual({ name: 'callback' })
})

当一个测试函数返回一个 promise 时，Vitest 将等待直到它被解决以收集异步的期望值。如果 promise 被拒绝，测试将失败。