From bc75d104eb97c5cdf3d050aa4c53187580e174bd Mon Sep 17 00:00:00 2001
From: Keegan Witt <keeganwitt@gmail.com>
Date: Mon, 9 Oct 2023 18:08:42 -0400
Subject: [PATCH] Update Vitest Typescript documentation (closes #649) (#662)

Co-authored-by: Christopher Dierkens <cjdierkens@gmail.com>
---
 website/docs/getting-started/setup.md | 60 +++++++++++++++++++--------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/website/docs/getting-started/setup.md b/website/docs/getting-started/setup.md
index 20e7f20b..e09e7a03 100644
--- a/website/docs/getting-started/setup.md
+++ b/website/docs/getting-started/setup.md
@@ -60,38 +60,62 @@ export default defineConfig({
 
 To use Vitest with TypeScript, create a file named `jest-extended.d.ts` with the content below in addition to the setup above.
 
+#### Vitest >= 0.31.0
+
 ```typescript
-/// <reference types="vitest" />
+import type CustomMatchers from 'jest-extended';
+import 'vitest';
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T> {}
+  interface AsymmetricMatchersContaining<T = any> extends CustomMatchers<T> {}
+  interface ExpectStatic extends CustomMatchers<T> {}
+}
+```
 
-export interface CustomMatchers<R> extends Record<string, any> {
-  toHaveBeenCalledAfter(
-    mock: jest.MockInstance<any, any[]> | import('vitest').MockInstance<any, any[]>,
-    failIfNoFirstInvocation?: boolean,
-  ): R;
+This can be combined with matchers from other dependencies or your own custom matchers. Here's an example of a custom matcher.
 
-  toHaveBeenCalledBefore(
-    mock: jest.MockInstance<any, any[]> | import('vitest').MockInstance<any, any[]>,
-    failIfNoSecondInvocation?: boolean,
-  ): R;
+```typescript
+import type CustomMatchers from 'jest-extended';
+import 'vitest';
 
-  toHaveBeenCalledExactlyOnceWith(...args: unknown[]): R;
+interface MyCustomMatchers {
+  toBeFoo(): any;
+}
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T>, MyCustomMatchers {}
+  interface AsymmetricMatchersContaining<T = any> extends CustomMatchers<T>, MyCustomMatchers {}
+  interface ExpectStatic extends CustomMatchers, MyCustomMatchers {}
 }
 ```
 
-For Vitest >= 0.31.0, append the content below to the new file.
+#### Vitest < 0.31.0
 
 ```typescript
-declare module 'vitest' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+import type CustomMatchers from 'jest-extended';
+import 'vi';
+
+declare module 'vi' {
   interface Assertion<T = any> extends CustomMatchers<T> {}
+  interface AsymmetricMatchersContaining<T = any> extends CustomMatchers<T> {}
+  interface ExpectStatic extends CustomMatchers<T> {}
 }
 ```
 
-For Vitest < 0.31.0, append the content below to the new file.
+This can be combined with matchers from other dependencies or your own custom matchers. Here's an example of a custom matcher.
 
 ```typescript
-declare namespace Vi {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface AsymmetricMatchersContaining extends CustomMatchers<any> {}
+import type CustomMatchers from 'jest-extended';
+import 'vi';
+
+interface MyCustomMatchers {
+  toBeFoo(): any;
+}
+
+declare module 'vi' {
+  interface Assertion<T = any> extends CustomMatchers<T>, MyCustomMatchers {}
+  interface AsymmetricMatchersContaining<T = any> extends CustomMatchers<T>, MyCustomMatchers {}
+  interface ExpectStatic extends CustomMatchers, MyCustomMatchers {}
 }
 ```