请问vitest这里配置context 的目的是什么呢？

Question

我见测试框架vitest使用中，有如下的示例：

import { beforeEach, it } from 'vitest'

beforeEach(async (context) => {
  // extend context
  context.foo = 'bar'
})

it('should work', (context) => {
  console.log(context.foo) //  'bar'
})

有2个问题想要咨询：
1）请问这里配置context 的目的是什么呢？

2）有报错：

类型“TaskContext<Test<object> | Custom<object>> & TestContext & object”上不存在属性“foo”。ts(2339)

Answer 1

先说问题二，你要是读的官方文档的话，紧接着这段的下一段就教你怎么在 TypeScript 声明额外的属性了：

REF: https://vitest.dev/guide/test-context.html#typescript-1

---

问题一就是个示例，告诉你钩子里可以访问上下文而已。

要是实际需求的话可能存在这样的场景，你有 N 个测试用例，你现在希望记录一下每个用例的耗时。传统方式的话你可以用例里写一段打点计时的代码，有了钩子和上下文的话你就可以这么写了：

beforeEach((context) => {
  context.startAt = new Date();
})

afterEach((context) => {
  const endAt = new Date();
  const used = endAt.getTime() - context.startAt.getTime();
  console.log(`${context.task.name} used ${used}ms.`);
})

这里你可以把 context 想象成 globalThis，但用例里你不能啥玩意儿都往 globalThis 上挂，否则一旦忘记清理了可能副作用就把别的用例搞坏。而 context 就很安全，每个用例都是隔离的，一个用例里你在 context 上随便改，也不会影响另一个用例。

Answer 2

这是 ts 的类型报错，因为 ts 没有办法感知你手动添加的内容，需要你扩展 context 的类型定义。

type MyContext = {
  foo: string
}

beforeEach<MyContext>(async (context) => {
  // extend context
  context.foo = 'bar'
})

it<MyContext>('should work', (context) => {
  console.log(context.foo) //  'bar'
})