对象模拟(Mocking)

在编写测试时，你可能会因为时间问题，需要创建内部或外部服务的“假”版本，这通常被称为对象模拟操作。Vitest 通过 vi 提供了一些实用的函数用于解决这个问题。你可以使用 import { vi } from 'vitest' 或者全局配置进行访问它 (当启用全局配置时)。

::: warning 警告 不要忘记在每次测试运行前后清除或恢复模拟对象，以撤消运行测试时模拟对象状态的更改！有关更多信息，请参阅 mockReset 文档。 :::

如果你想先深入了解, 可以先阅读 API 的 vi 部分，或者继续跟着文档深入了解一下这个对象模拟的世界。

日期

有些时候，你可能需要控制日期来确保测试时的一致性。Vitest 使用了 @sinonjs/fake-timers 库来操作定时器以及系统日期。可以在这里找到有关特定 API 的更多详细信息。

示例

  1. import { afterEach, describe, expect, it, vi } from 'vitest'
  3. const businessHours = [9, 17]
  5. const purchase = () => {
  6.   const currentHour = new Date().getHours()
  7.   const [open, close] = businessHours
  9.   if (currentHour > open && currentHour < close) {
  10.     return { message: 'Success' }
  11.   }
  13.   return { message: 'Error' }
  14. };
  16. describe('purchasing flow', () => {
  17.   beforeEach(() => {
  18.     // 告诉 vitest 我们使用模拟时间
  19.     vi.useFakeTimers()
  20.   });
  22.   afterEach(() => {
  23.     // 每次测试运行后恢复日期
  24.     vi.useRealTimers()
  25.   });
  27.   it('allows purchases within business hours', () => {
  28.     // 在营业时间内设定时间
  29.     const date = new Date(2000, 1, 1, 13)
  30.     vi.setSystemTime(date)
  32.     // 访问 Date.now() 将导致上面设置的日期
  33.     expect(purchase()).toEqual({ message: 'Success' })
  34.   })
  36.   it('disallows purchases outside of business hours', () => {
  37.     // 设置营业时间以外的时间
  38.     const date = new Date(2000, 1, 1, 19)
  39.     vi.setSystemTime(date)
  41.     // 访问 Date.now() 将导致上面设置的日期
  42.     expect(purchase()).toEqual({ message: 'Error' })
  43.   })
  44. })

函数

对于函数的模拟可以分为两种类别：对象监听(Spy) 和对象模拟.

有时你可能只需要验证是否调用了特定函数（以及可能传递了哪些参数），在这种情况下，我们就需要使用一个对象监听，可以直接使用 vi.spyOn() 来对一个函数进行监听（在这里可以阅读更多的内容）。

然而对象监听操作没有办法去更改这些函数的实现。当我们需要创建一个可以使用的假的（或模拟的）函数版本时，可以使用 vi.fn()（在这里可以阅读更多的内容）。

我们使用 Tinyspy 作为模拟函数的基础，同时也有一套自己的包装器来使其与 Jest 兼容。vi.fn() 和 vi.spyOn() 共享相同的方法，但是只有 vi.fn() 的返回结果是可调用的。

示例

  1. import { afterEach, describe, expect, it, vi } from 'vitest'
  3. const getLatest = (index = messages.items.length - 1) => messages.items[index]
  5. const messages = {
  6.   items: [
  7.     { message: 'Simple test message', from: 'Testman' },
  8.     // ...
  9.   ],
  10.   getLatest, // 也可以是“getter 或 setter（如果支持）”
  12. describe('reading messages', () => {
  13.   afterEach(() => {
  14.     vi.restoreAllMocks()
  15.   })
  17.   it('should get the latest message with a spy', () => {
  18.     const spy = vi.spyOn(messages, 'getLatest')
  19.     expect(spy.getMockName()).toEqual('getLatest')
  21.     expect(messages.getLatest()).toEqual(
  22.       messages.items[messages.items.length - 1]
  23.     );
  25.     expect(spy).toHaveBeenCalledTimes(1)
  27.     spy.mockImplementationOnce(() => 'access-restricted')
  28.     expect(messages.getLatest()).toEqual('access-restricted')
  30.     expect(spy).toHaveBeenCalledTimes(2)
  31.   });
  33.   it('should get with a mock', () => {
  34.     const mock = vi.fn().mockImplementation(getLatest)
  36.     expect(mock()).toEqual(messages.items[messages.items.length - 1])
  37.     expect(mock).toHaveBeenCalledTimes(1)
  39.     mock.mockImplementationOnce(() => 'access-restricted')
  40.     expect(mock()).toEqual('access-restricted')
  42.     expect(mock).toHaveBeenCalledTimes(2)
  44.     expect(mock()).toEqual(messages.items[messages.items.length - 1])
  45.     expect(mock).toHaveBeenCalledTimes(3)
  46.   })
  47. })

了解更多

模块

模拟模块观察第三方库，在一些其他代码中被调用，允许你测试参数、输出甚至重新声明其实现。

参见 vi.mock() API 部分，以获得更深入详细 API 描述。

自动模拟算法

如果你的代码导入了模拟模块，但是没有使用 __mocks__ 文件或 factory 模块，Vitest 将会通过调用和模拟模块的每个导出来模拟模块本身。

适用于以下这些原则：

  • 所有的数组将被清空
  • 所有的基础类型和集合将保持不变
  • 所有的对象都将被深度克隆
  • 类的所有实例及其原型都将被深度克隆

示例

  1. import { vi, beforeEach, afterEach, describe, it } from 'vitest';
  2. import { Client } from 'pg';
  4. // handlers
  5. export function success(data) {}
  6. export function failure(data) {}
  7. // get todos
  8. export const getTodos = async (event, context) => {
  9.   const client = new Client({
  10.     // ...clientOptions
  11.   });
  13.   await client.connect()
  15.   try {
  16.     const result = await client.query(`SELECT * FROM todos;`)
  18.     client.end()
  20.     return success({
  21.       message: `${result.rowCount} item(s) returned`,
  22.       data: result.rows,
  23.       status: true,
  24.     })
  25.   } catch (e) {
  26.     console.error(e.stack)
  28.     client.end()
  30.     return failure({ message: e, status: false })
  31.   }
  32. };
  34. vi.mock('pg', () => {
  35.   return {
  36.     Client: vi.fn(() => ({
  37.       connect: vi.fn(),
  38.       query: vi.fn(),
  39.       end: vi.fn(),
  40.     })),
  41.   };
  42. });
  44. vi.mock('./handler.js', () => {
  45.   return {
  46.     success: vi.fn(),
  47.     failure: vi.fn(),
  48.   };
  49. });
  51. describe('get a list of todo items', () => {
  52.   let client;
  54.   beforeEach(() => {
  55.     client = new Client()
  56.   });
  58.   afterEach(() => {
  59.     vi.clearAllMocks()
  60.   });
  62.   it('should return items successfully', async () => {
  63.     client.query.mockResolvedValueOnce({ rows: [], rowCount: 0 })
  65.     await getTodos()
  67.     expect(client.connect).toBeCalledTimes(1)
  68.     expect(client.query).toBeCalledWith('SELECT * FROM todos;')
  69.     expect(client.end).toBeCalledTimes(1)
  71.     expect(success).toBeCalledWith({
  72.       message: '0 item(s) returned',
  73.       data: [],
  74.       status: true,
  75.     })
  76.   })
  78.   it('should throw an error', async () => {
  79.     const mError = new Error('Unable to retrieve rows')
  80.     client.query.mockRejectedValueOnce(mError)
  82.     await getTodos()
  84.     expect(client.connect).toBeCalledTimes(1)
  85.     expect(client.query).toBeCalledWith('SELECT * FROM todos;')
  86.     expect(client.end).toBeCalledTimes(1)
  87.     expect(failure).toBeCalledWith({ message: mError, status: false })
  88.   })
  89. })

网络请求

因为 Vitest 运行在 Node 环境中，所以模拟网络请求是一件非常棘手的事情; 由于没有办法使用 Web API，因此我们需要一些可以为我们模拟网络行为的包。推荐使用 Mock Service Worker 来进行这个操作。它可以同时模拟 REST 和 GraphQL 网络请求，并且跟所使用的框架没有任何联系。

Mock Service Worker (MSW) 通过拦截测试发出的请求进行工作，允许我们在不更改任何应用程序代码的情况下使用它。在浏览器中，会使用 Service Worker API。在 Node 和 Vitest 中，会使用 node-request-interceptor。要了解有关 MSW 的更多信息，可以去阅读他们的介绍。

配置

将以下内容添加到测试配置文件

  1. import { beforeAll, afterAll, afterEach } from 'vitest'
  2. import { setupServer } from 'msw/node'
  3. import { graphql, rest } from 'msw'
  5. const posts = [
  6.   {
  7.     userId: 1,
  8.     id: 1,
  9.     title: 'first post title',
  10.     body: 'first post body',
  11.   },
  12.   ...
  13. ]
  15. export const restHandlers = [
  16.   rest.get('https://rest-endpoint.example/path/to/posts', (req, res, ctx) => {
  17.     return res(ctx.status(200), ctx.json(posts))
  18.   }),
  19. ]
  21. const graphqlHandlers = [
  22.   graphql.query('https://graphql-endpoint.example/api/v1/posts', (req, res, ctx) => {
  23.     return res(ctx.data(posts))
  24.   }),
  25. ]
  27. const server = setupServer(...restHandlers, ...graphqlHandlers)
  29. // 在所有测试之前启动服务器
  30. beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
  32. // 所有测试后关闭服务器
  33. afterAll(() => server.close())
  35. // 每次测试后重置处理程序“对测试隔离很重要”
  36. afterEach(() => server.resetHandlers())

配置服务 onUnhandleRequest: 'error' 只要产生了没有相应类型的请求处理，就会发生错误。

示例

我们有一个使用 MSW 的完整工作示例： React Testing with MSW.

了解更多

MSW还有很多。您可以访问 cookie 和查询参数、定义模拟错误响应等等！要查看您可以使用 MSW 做什么，请阅读他们的文档。

定时器

每当我们测试涉及到超时或者间隔的代码时，并不是让我们的测试程序进行等待或者超时。我们也可以通过模拟对 setTimeout 和 setInterval 的调用来使用“假”定时器来加速我们的测试。

有关更深入的详细 API 描述，请参vi.mock() API 部分。

示例

  1. import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'
  3. const executeAfterTwoHours = (func) => {
  4.   setTimeout(func, 1000 * 60 * 60 * 2) // 2 hours
  5. }
  7. const executeEveryMinute = (func) => {
  8.   setInterval(func, 1000 * 60); // 1 minute
  9. }
  11. const mock = vi.fn(() => console.log('executed'));
  13. describe('delayed execution', () => {
  14.   beforeEach(() => {
  15.     vi.useFakeTimers()
  16.   })
  17.   afterEach(()=> {
  18.     vi.restoreAllMocks()
  19.   })
  20.   it('should execute the function', () => {
  21.     executeAfterTwoHours(mock);
  22.     vi.runAllTimers();
  23.     expect(mock).toHaveBeenCalledTimes(1);
  24.   })
  25.   it('should not execute the function', () => {
  26.     executeAfterTwoHours(mock);
  27.     // advancing by 2ms won't trigger the func
  28.     vi.advanceTimersByTime(2);
  29.     expect(mock).not.toHaveBeenCalled();
  30.   })
  31.   it('should execute every minute', () => {
  32.     executeEveryMinute(mock);
  33.     vi.advanceTimersToNextTimer();
  34.     vi.advanceTimersToNextTimer();
  35.     expect(mock).toHaveBeenCalledTimes(1);
  36.     vi.advanceTimersToNextTimer();
  37.     expect(mock).toHaveBeenCalledTimes(2);
  38.   })
  39. })