Skip to content

Commit 1b08ee8

Browse files
committed
list correct extension of Matchers type in vitest
1 parent 3a761ae commit 1b08ee8

File tree

3 files changed

+8
-27
lines changed

3 files changed

+8
-27
lines changed

exercises/03.assertions/01.problem.custom-matchers/vitest.setup.ts

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,11 @@
1717
// 🐨 Augment the type definition for the `vitest` module.
1818
// 💰 declare module 'name' {}
1919
//
20-
// 🐨 Inside the module declaration, declare an interface called `Assertion<T = any>`.
20+
// 🐨 Inside the module declaration, declare an interface called `Matchers<T>`.
2121
// Make it extend the `CustomMatchers` interface you created earlier.
2222
// This will extend the type definitions of the `expect()` function to recognize
2323
// your custom matchers.
24-
// 💰 interface Assertion<T = any> extends CustomMatchers<T> {}
25-
//
26-
// 🐨 In a similar way, declare another interface called `MatchersDeclaration`
27-
// and make it extend your `CustomMatchers` interface.
28-
// This will extend the type definitions of the `expect.extend()` function
29-
// to make the implementation of your custom matchers type-safe.
30-
// 💰 interface MatchersDeclaration extends CustomMatchers {}
24+
// 💰 interface Matchers<T> extends CustomMatchers<T> {}
3125
//
3226
// This covers your custom matcher on the type-level.
3327
// Now, let's continue with its implementation!

exercises/03.assertions/01.solution.custom-matchers/README.mdx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ But this is only half of the story. Running this `expect()` statement will throw
5050

5151
To provide a matcher implementation, call `expect.extend()` and provide it with an object that contains the definitions for your custom matchers:
5252

53-
```ts filename=vitest.setup.ts add=1,13-15
53+
```ts filename=vitest.setup.ts add=1,12-14
5454
import { expect } from 'vitest'
5555
import type { Schema } from 'zod'
5656

@@ -59,8 +59,7 @@ interface CustomMatchers<MatcherResult = any> {
5959
}
6060

6161
declare module 'vitest' {
62-
interface Assertion<T = any> extends CustomMatchers<T> {}
63-
interface MatchersDeclaration extends CustomMatchers {}
62+
interface Matchers<T> extends CustomMatchers<T> {}
6463
}
6564

6665
expect.extend({

exercises/03.assertions/02.solution.asymmetric-matchers/README.mdx

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,9 @@
22

33
<EpicVideo url="https://www.epicweb.dev/workshops/advanced-vitest-patterns/assertions/03-02-problem/solution" />
44

5-
To expose my `.toMatchSchema()` matcher as an asymmetric matcher, I will extend the `AsymmetricMatchersContaining` interface of the `vitest` module:
6-
7-
```ts nonumber add=4
8-
declare module 'vitest' {
9-
interface Assertion<T = any> extends CustomMatchers<T> {}
10-
interface MatchersDeclaration extends CustomMatchers {}
11-
interface AsymmetricMatchersContaining extends CustomMatchers {}
12-
}
13-
```
14-
15-
> The `AsymmetricMatchersContaining` controls the matcher types available as asymmetric matchers on the `expect` object (e.g. `expect.objectContaining()`).
5+
To expose my `.toMatchSchema()` matcher as an asymmetric matcher, I need to... do nothing! Vitest automatically provides both symmetric and asymmetric versions for your custom matchers, including type definitions.
166

17-
With this change, the type error in the `src/fetch-user.test.ts` is finally gone! 🎉
7+
All that's left for me to do is to use the asymmetric version of the `toMatchSchema()` matcher in tests:
188

199
```ts filename=src/fetch-user.test.ts highlight=6
2010
import { fetchUser } from './fetch-user'
@@ -26,9 +16,7 @@ test('returns the user by id', async () => {
2616
})
2717
```
2818

29-
This means that I can use the `.toMatchSchema()` matcher as asymmetric, which is exactly what I need to complete the test case for user transactions.
30-
31-
In `src/fetch-transaction.test.ts`, I will write the remaining test:
19+
And in `src/fetch-transaction.test.ts`, I will write the remaining test:
3220

3321
```ts filename=src/fetch-transaction.test.ts add=5-11
3422
import { fetchTransaction, type Transaction } from './fetch-transaction'
@@ -45,7 +33,7 @@ test('fetches a transaction between two users', async () => {
4533
})
4634
```
4735

48-
> 🦉 Notice how I'm using schema validation to make sure that transaction's `issuer` and `recipient` properties both match the `userSchema`.
36+
> 🦉 Notice the usage of the `Transaction` type as the type argument to the default `.toEqual` matcher. It ensures that the expected value I pass to that matcher is type-safe.
4937
5038
## Related materials
5139

0 commit comments

Comments
 (0)