From 7fc39e5cf713f412b14640752d249c1382fe9f54 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Mon, 29 Jan 2024 18:43:24 +1100
Subject: [PATCH 1/5] docs(svelte-testing-library): add event, slot, binding,
 and context examples

---
 docs/svelte-testing-library/example.mdx | 282 +++++++++++++++++++++---
 1 file changed, 254 insertions(+), 28 deletions(-)

diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx
index 26c8fe34a..98870f87b 100644
--- a/docs/svelte-testing-library/example.mdx
+++ b/docs/svelte-testing-library/example.mdx
@@ -4,53 +4,279 @@ title: Example
 sidebar_label: Example
 ---
 
-## Component
+- [Basic](#basic)
+- [Events](#events)
+- [Slots](#slots)
+- [Two-way data binding](#two-way-data-binding)
+- [Contexts](#contexts)
 
-```html
+For additional resources, patterns, and best practices about testing Svelte
+components and other Svelte features, take a look at the [Svelte Society testing
+recipes][testing-recipes].
+
+[testing-recipes]:
+  https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component
+
+## Basic
+
+### Component
+
+```html filename="src/greeter.svelte"
 <script>
   export let name
 
-  let buttonText = 'Button'
+  let showGreeting = false
 
-  function handleClick() {
-    buttonText = 'Button Clicked'
-  }
+  const handleClick = () => (showGreeting = true)
 </script>
 
-<h1>Hello {name}!</h1>
+<button on:click="{handleClick}">Greet</button>
 
-<button on:click="{handleClick}">{buttonText}</button>
+{#if showGreeting}
+<p>Hello {name}</p>
+{/if}
 ```
 
-## Test
+### Tests
 
-```js
-// NOTE: jest-dom adds handy assertions to Jest (and Vitest) and it is recommended, but not required.
-import '@testing-library/jest-dom'
+```js filename="src/__tests__/greeter.test.js"
+import {test} from 'vitest'
 
-import {render, fireEvent, screen} from '@testing-library/svelte'
+import {render, screen} from '@testing-library/svelte'
+import userEvent from '@testing-library/user-event'
 
-import Comp from '../Comp'
+import Greeter from '../greeter.svelte'
 
-test('shows proper heading when rendered', () => {
-  render(Comp, {name: 'World'})
-  const heading = screen.getByText('Hello World!')
-  expect(heading).toBeInTheDocument()
+test('no initial greeting', () => {
+  render(Greeter, {name: 'World'})
+
+  const button = screen.getByRole('button', {name: 'Greet'})
+  const greeting = screen.queryByText(/hello/iu)
+
+  expect(button).toBeInTheDocument()
+  expect(greeting).not.toBeInTheDocument()
 })
 
-// Note: This is as an async test as we are using `fireEvent`
-test('changes button text on click', async () => {
-  render(Comp, {name: 'World'})
+test('greeting appears on click', async () => {
+  const user = userEvent.setup()
+  render(Greeter, {name: 'World'})
+
   const button = screen.getByRole('button')
+  await user.click(button)
+  const greeting = screen.getByText(/hello world/iu)
+
+  expect(greeting).toBeInTheDocument()
+})
+```
+
+## Events
+
+Events can be tested using spy functions. Function props are more
+straightforward to use and test than events, so consider using them if they make
+sense for your project.
+
+### Component
+
+```html filename="src/button-with-event.svelte"
+<button on:click>click me</button>
+```
+
+```html filename="src/button-with-prop.svelte"
+<script>
+  export let onClick
+</script>
+
+<button on:click="{onClick}">click me</button>
+```
+
+### Tests
+
+```js filename="src/__tests__/button.test.ts"
+import {test, vi} from 'vitest'
+
+import {render, screen} from '@testing-library/svelte'
+import userEvent from '@testing-library/user-event'
+
+import ButtonWithEvent from '../button-with-event.svelte'
+import ButtonWithProp from '../button-with-prop.svelte'
+
+test('button with event', async () => {
+  const user = userEvent.setup()
+  const onClick = vi.fn()
+
+  const {component} = render(ButtonWithEvent)
+  component.$on('click', onClick)
+
+  const button = screen.getByRole('button')
+  await userEvent.click(button)
+
+  expect(onClick).toHaveBeenCalledOnce()
+})
+
+test('button with function prop', async () => {
+  const user = userEvent.setup()
+  const onClick = vi.fn()
+
+  render(ButtonWithProp, {onClick})
+
+  const button = screen.getByRole('button')
+  await userEvent.click(button)
+
+  expect(onClick).toHaveBeenCalledOnce()
+})
+```
+
+## Slots
+
+To test slots, create a wrapper component for your test. Since slots are a
+developer-facing API, test IDs can be helpful.
+
+### Component
+
+```html filename="src/heading.svelte"
+<h1>
+  <slot />
+</h1>
+```
+
+### Tests
+
+```html filename="src/__tests__/heading.test.svelte"
+<script>
+  import Heading from '../heading.svelte'
+</script>
+
+<Heading>
+  <span data-testid="child" />
+</Heading>
+```
+
+```js filename="src/__tests__/heading.test.js"
+import {test} from 'vitest'
+import {render, screen, within} from '@testing-library/svelte'
+
+import HeadingTest from './heading.test.svelte'
+
+test('heading with slot', () => {
+  render(HeadingTest)
 
-  // Using await when firing events is unique to the svelte testing library because
-  // we have to wait for the next `tick` so that Svelte flushes all pending state changes.
-  await fireEvent.click(button)
+  const heading = screen.getByRole('heading')
+  const child = within(heading).getByTestId('child')
 
-  expect(button).toHaveTextContent('Button Clicked')
+  expect(child).toBeInTheDocument()
 })
 ```
 
-For additional resources, patterns and best practices about testing svelte
-components and other svelte features take a look at the
-[Svelte Society testing recipe](https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component).
+## Two-way data binding
+
+Two-way data binding can be difficult to test directly. It's usually best to
+structure your code so that you can test the user-facing results, leaving the
+binding as an implementation detail.
+
+However, if two-way binding is an important developer-facing API of your
+component, you can use a wrapper component and writable stores to test the
+binding itself.
+
+### Component
+
+```html filename="src/text-input.svelte"
+<script>
+  export let value = ''
+</script>
+
+<input type="text" bind:value="{value}" />
+```
+
+### Tests
+
+```html filename="src/__tests__/text-input.test.svelte"
+<script>
+  import TextInput from '../text-input.svelte'
+
+  export let valueStore
+</script>
+
+<TextInput bind:value="{$valueStore}" />
+```
+
+```js filename="src/__tests__/text-input.test.js"
+import {test} from 'vitest'
+
+import {render, screen} from '@testing-library/svelte'
+import userEvent from '@testing-library/user-event'
+import {get, writable} from 'svelte/store'
+
+import TextInputTest from './text-input.test.svelte'
+
+test('text input with value binding', async () => {
+  const user = userEvent.setup()
+  const valueStore = writable('')
+
+  render(TextInputTest, {valueStore})
+
+  const input = screen.getByRole('textbox')
+  await user.type(input, 'hello world')
+
+  expect(get(valueStore)).toBe('hello world')
+})
+```
+
+## Contexts
+
+If your component requires access to contexts, you can pass those contexts in
+when you [`render`][component-options] the component. When you use options like
+`context`, be sure to place any props in the `props` key.
+
+[component-options]: ./api.mdx#component-options
+
+### Components
+
+```html filename="src/messages-provider.svelte"
+<script>
+  import {setContext} from 'svelte'
+  import {writable} from 'svelte/stores'
+
+  setContext('messages', writable([]))
+</script>
+```
+
+```html filename="src/notifications.svelte"
+<script>
+  import {getContext} from 'svelte'
+
+  export let label
+
+  const messages = getContext('messages')
+</script>
+
+<div role="status" aria-label="{label}">
+  {#each $messages as message (message.id)}
+  <p>{message.text}</p>
+  {/each}
+</div>
+```
+
+### Tests
+
+```js filename="src/__tests__/notifications.test.js"
+import {test} from 'vitest'
+
+import {render, screen} from '@testing-library/svelte'
+import userEvent from '@testing-library/user-event'
+import {readable} from 'svelte/store'
+
+import Notifications from '../notifications.svelte'
+
+test('text input with value binding', async () => {
+  const messages = readable(['hello', 'world'])
+
+  render(TextInputTest, {
+    context: new Map([['messages', messages]]),
+    props: {label: 'Notifications'},
+  })
+
+  const status = screen.getByRole('status', {name: 'Notifications'})
+
+  expect(status).toHaveTextContent('hello world')
+})
+```

From d4e4a6405d5c674411e23d38145ebbe0335112ae Mon Sep 17 00:00:00 2001
From: Mike Cousins <mike@cousins.io>
Date: Sun, 11 Feb 2024 01:06:33 -0500
Subject: [PATCH 2/5] fixup: fix code block title, remove redundant ToC

---
 docs/svelte-testing-library/example.mdx | 56 +++++++------------------
 1 file changed, 15 insertions(+), 41 deletions(-)

diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx
index 98870f87b..8ea3f494e 100644
--- a/docs/svelte-testing-library/example.mdx
+++ b/docs/svelte-testing-library/example.mdx
@@ -4,12 +4,6 @@ title: Example
 sidebar_label: Example
 ---
 
-- [Basic](#basic)
-- [Events](#events)
-- [Slots](#slots)
-- [Two-way data binding](#two-way-data-binding)
-- [Contexts](#contexts)
-
 For additional resources, patterns, and best practices about testing Svelte
 components and other Svelte features, take a look at the [Svelte Society testing
 recipes][testing-recipes].
@@ -19,9 +13,7 @@ recipes][testing-recipes].
 
 ## Basic
 
-### Component
-
-```html filename="src/greeter.svelte"
+```html title="src/greeter.svelte"
 <script>
   export let name
 
@@ -37,9 +29,7 @@ recipes][testing-recipes].
 {/if}
 ```
 
-### Tests
-
-```js filename="src/__tests__/greeter.test.js"
+```js title="src/__tests__/greeter.test.js"
 import {test} from 'vitest'
 
 import {render, screen} from '@testing-library/svelte'
@@ -75,13 +65,11 @@ Events can be tested using spy functions. Function props are more
 straightforward to use and test than events, so consider using them if they make
 sense for your project.
 
-### Component
-
-```html filename="src/button-with-event.svelte"
+```html title="src/button-with-event.svelte"
 <button on:click>click me</button>
 ```
 
-```html filename="src/button-with-prop.svelte"
+```html title="src/button-with-prop.svelte"
 <script>
   export let onClick
 </script>
@@ -89,9 +77,7 @@ sense for your project.
 <button on:click="{onClick}">click me</button>
 ```
 
-### Tests
-
-```js filename="src/__tests__/button.test.ts"
+```js title="src/__tests__/button.test.ts"
 import {test, vi} from 'vitest'
 
 import {render, screen} from '@testing-library/svelte'
@@ -131,17 +117,13 @@ test('button with function prop', async () => {
 To test slots, create a wrapper component for your test. Since slots are a
 developer-facing API, test IDs can be helpful.
 
-### Component
-
-```html filename="src/heading.svelte"
+```html title="src/heading.svelte"
 <h1>
   <slot />
 </h1>
 ```
 
-### Tests
-
-```html filename="src/__tests__/heading.test.svelte"
+```html title="src/__tests__/heading.test.svelte"
 <script>
   import Heading from '../heading.svelte'
 </script>
@@ -151,7 +133,7 @@ developer-facing API, test IDs can be helpful.
 </Heading>
 ```
 
-```js filename="src/__tests__/heading.test.js"
+```js title="src/__tests__/heading.test.js"
 import {test} from 'vitest'
 import {render, screen, within} from '@testing-library/svelte'
 
@@ -174,12 +156,10 @@ structure your code so that you can test the user-facing results, leaving the
 binding as an implementation detail.
 
 However, if two-way binding is an important developer-facing API of your
-component, you can use a wrapper component and writable stores to test the
+component, you can use a wrapper component and writable store to test the
 binding itself.
 
-### Component
-
-```html filename="src/text-input.svelte"
+```html title="src/text-input.svelte"
 <script>
   export let value = ''
 </script>
@@ -187,9 +167,7 @@ binding itself.
 <input type="text" bind:value="{value}" />
 ```
 
-### Tests
-
-```html filename="src/__tests__/text-input.test.svelte"
+```html title="src/__tests__/text-input.test.svelte"
 <script>
   import TextInput from '../text-input.svelte'
 
@@ -199,7 +177,7 @@ binding itself.
 <TextInput bind:value="{$valueStore}" />
 ```
 
-```js filename="src/__tests__/text-input.test.js"
+```js title="src/__tests__/text-input.test.js"
 import {test} from 'vitest'
 
 import {render, screen} from '@testing-library/svelte'
@@ -229,9 +207,7 @@ when you [`render`][component-options] the component. When you use options like
 
 [component-options]: ./api.mdx#component-options
 
-### Components
-
-```html filename="src/messages-provider.svelte"
+```html title="src/messages-provider.svelte"
 <script>
   import {setContext} from 'svelte'
   import {writable} from 'svelte/stores'
@@ -240,7 +216,7 @@ when you [`render`][component-options] the component. When you use options like
 </script>
 ```
 
-```html filename="src/notifications.svelte"
+```html title="src/notifications.svelte"
 <script>
   import {getContext} from 'svelte'
 
@@ -256,9 +232,7 @@ when you [`render`][component-options] the component. When you use options like
 </div>
 ```
 
-### Tests
-
-```js filename="src/__tests__/notifications.test.js"
+```js title="src/__tests__/notifications.test.js"
 import {test} from 'vitest'
 
 import {render, screen} from '@testing-library/svelte'

From b0f2f96734a7175d436ab33798083024a3e4deed Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael@cousins.io>
Date: Mon, 12 Feb 2024 09:48:23 -0500
Subject: [PATCH 3/5] fixup: fix examples after testing

---
 docs/svelte-testing-library/example.mdx | 105 ++++++++++++++----------
 1 file changed, 61 insertions(+), 44 deletions(-)

diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx
index 8ea3f494e..65cc8c7f5 100644
--- a/docs/svelte-testing-library/example.mdx
+++ b/docs/svelte-testing-library/example.mdx
@@ -13,7 +13,15 @@ recipes][testing-recipes].
 
 ## Basic
 
-```html title="src/greeter.svelte"
+This basic example demonstrates how to:
+
+- Pass props to your Svelte component using `render`
+- Query the structure of your component's DOM elements using `screen`
+- Interact with your component using [`@testing-library/user-event`][user-event]
+- Make assertions using `expect`, using methods added by
+  [`@testing-library/jest-dom`][jest-dom]
+
+```html title="greeter.svelte"
 <script>
   export let name
 
@@ -29,13 +37,12 @@ recipes][testing-recipes].
 {/if}
 ```
 
-```js title="src/__tests__/greeter.test.js"
-import {test} from 'vitest'
-
+```js title="greeter.test.js"
 import {render, screen} from '@testing-library/svelte'
 import userEvent from '@testing-library/user-event'
+import {expect, test} from 'vitest'
 
-import Greeter from '../greeter.svelte'
+import Greeter from './greeter.svelte'
 
 test('no initial greeting', () => {
   render(Greeter, {name: 'World'})
@@ -59,17 +66,20 @@ test('greeting appears on click', async () => {
 })
 ```
 
+[user-event]: ../user-event/intro.mdx
+[jest-dom]: https://github.com/testing-library/jest-dom
+
 ## Events
 
-Events can be tested using spy functions. Function props are more
-straightforward to use and test than events, so consider using them if they make
-sense for your project.
+Events can be tested using spy functions, like those provided by
+[`vi.fn()`][vi-fn]. Function props are more straightforward to use and test than
+events, so consider using them if they make sense for your project.
 
-```html title="src/button-with-event.svelte"
+```html title="button-with-event.svelte"
 <button on:click>click me</button>
 ```
 
-```html title="src/button-with-prop.svelte"
+```html title="button-with-prop.svelte"
 <script>
   export let onClick
 </script>
@@ -77,14 +87,13 @@ sense for your project.
 <button on:click="{onClick}">click me</button>
 ```
 
-```js title="src/__tests__/button.test.ts"
-import {test, vi} from 'vitest'
-
+```js title="button.test.ts"
 import {render, screen} from '@testing-library/svelte'
 import userEvent from '@testing-library/user-event'
+import {expect, test, vi} from 'vitest'
 
-import ButtonWithEvent from '../button-with-event.svelte'
-import ButtonWithProp from '../button-with-prop.svelte'
+import ButtonWithEvent from './button-with-event.svelte'
+import ButtonWithProp from './button-with-prop.svelte'
 
 test('button with event', async () => {
   const user = userEvent.setup()
@@ -94,7 +103,7 @@ test('button with event', async () => {
   component.$on('click', onClick)
 
   const button = screen.getByRole('button')
-  await userEvent.click(button)
+  await user.click(button)
 
   expect(onClick).toHaveBeenCalledOnce()
 })
@@ -106,26 +115,33 @@ test('button with function prop', async () => {
   render(ButtonWithProp, {onClick})
 
   const button = screen.getByRole('button')
-  await userEvent.click(button)
+  await user.click(button)
 
   expect(onClick).toHaveBeenCalledOnce()
 })
 ```
 
+[vi-fn]: https://vitest.dev/api/vi.html#vi-fn
+
 ## Slots
 
-To test slots, create a wrapper component for your test. Since slots are a
-developer-facing API, test IDs can be helpful.
+Slots cannot be tested directly. It's usually easier to structure your code so
+that you can test the user-facing results, leaving any slots as an
+implementation detail.
+
+However, if slots are an important developer-facing API of your component, you
+can use a wrapper component and "dummy" children to test them. Test IDs can be
+helpful when testing slots in this manner.
 
-```html title="src/heading.svelte"
+```html title="heading.svelte"
 <h1>
   <slot />
 </h1>
 ```
 
-```html title="src/__tests__/heading.test.svelte"
+```html title="heading.test.svelte"
 <script>
-  import Heading from '../heading.svelte'
+  import Heading from './heading.svelte'
 </script>
 
 <Heading>
@@ -133,9 +149,9 @@ developer-facing API, test IDs can be helpful.
 </Heading>
 ```
 
-```js title="src/__tests__/heading.test.js"
-import {test} from 'vitest'
+```js title="heading.test.js"
 import {render, screen, within} from '@testing-library/svelte'
+import {expect, test} from 'vitest'
 
 import HeadingTest from './heading.test.svelte'
 
@@ -151,15 +167,15 @@ test('heading with slot', () => {
 
 ## Two-way data binding
 
-Two-way data binding can be difficult to test directly. It's usually best to
-structure your code so that you can test the user-facing results, leaving the
-binding as an implementation detail.
+Two-way data binding cannot be tested directly. It's usually easier to structure
+your code so that you can test the user-facing results, leaving the binding as
+an implementation detail.
 
 However, if two-way binding is an important developer-facing API of your
 component, you can use a wrapper component and writable store to test the
 binding itself.
 
-```html title="src/text-input.svelte"
+```html title="text-input.svelte"
 <script>
   export let value = ''
 </script>
@@ -167,9 +183,9 @@ binding itself.
 <input type="text" bind:value="{value}" />
 ```
 
-```html title="src/__tests__/text-input.test.svelte"
+```html title="text-input.test.svelte"
 <script>
-  import TextInput from '../text-input.svelte'
+  import TextInput from './text-input.svelte'
 
   export let valueStore
 </script>
@@ -177,12 +193,11 @@ binding itself.
 <TextInput bind:value="{$valueStore}" />
 ```
 
-```js title="src/__tests__/text-input.test.js"
-import {test} from 'vitest'
-
+```js title="text-input.test.js"
 import {render, screen} from '@testing-library/svelte'
 import userEvent from '@testing-library/user-event'
 import {get, writable} from 'svelte/store'
+import {expect, test} from 'vitest'
 
 import TextInputTest from './text-input.test.svelte'
 
@@ -203,11 +218,11 @@ test('text input with value binding', async () => {
 
 If your component requires access to contexts, you can pass those contexts in
 when you [`render`][component-options] the component. When you use options like
-`context`, be sure to place any props in the `props` key.
+`context`, be sure to place props under the `props` key.
 
 [component-options]: ./api.mdx#component-options
 
-```html title="src/messages-provider.svelte"
+```html title="notifications-provider.svelte"
 <script>
   import {setContext} from 'svelte'
   import {writable} from 'svelte/stores'
@@ -216,7 +231,7 @@ when you [`render`][component-options] the component. When you use options like
 </script>
 ```
 
-```html title="src/notifications.svelte"
+```html title="notifications.svelte"
 <script>
   import {getContext} from 'svelte'
 
@@ -228,23 +243,25 @@ when you [`render`][component-options] the component. When you use options like
 <div role="status" aria-label="{label}">
   {#each $messages as message (message.id)}
   <p>{message.text}</p>
+  <hr />
   {/each}
 </div>
 ```
 
-```js title="src/__tests__/notifications.test.js"
-import {test} from 'vitest'
-
+```js title="notifications.test.js"
 import {render, screen} from '@testing-library/svelte'
-import userEvent from '@testing-library/user-event'
 import {readable} from 'svelte/store'
+import {expect, test} from 'vitest'
 
-import Notifications from '../notifications.svelte'
+import Notifications from './notifications.svelte'
 
-test('text input with value binding', async () => {
-  const messages = readable(['hello', 'world'])
+test('notifications with messages from context', async () => {
+  const messages = readable([
+    {id: 'abc', text: 'hello'},
+    {id: 'def', text: 'world'},
+  ])
 
-  render(TextInputTest, {
+  render(Notifications, {
     context: new Map([['messages', messages]]),
     props: {label: 'Notifications'},
   })

From 402e2b46ccb717c2e2c7669acebf533159577d37 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael@cousins.io>
Date: Tue, 13 Feb 2024 15:18:11 -0500
Subject: [PATCH 4/5] fixup: apply suggestions

Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
---
 docs/svelte-testing-library/example.mdx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx
index 65cc8c7f5..ece0f1271 100644
--- a/docs/svelte-testing-library/example.mdx
+++ b/docs/svelte-testing-library/example.mdx
@@ -18,7 +18,7 @@ This basic example demonstrates how to:
 - Pass props to your Svelte component using `render`
 - Query the structure of your component's DOM elements using `screen`
 - Interact with your component using [`@testing-library/user-event`][user-event]
-- Make assertions using `expect`, using methods added by
+- Make assertions using `expect`, using matchers from
   [`@testing-library/jest-dom`][jest-dom]
 
 ```html title="greeter.svelte"
@@ -71,9 +71,14 @@ test('greeting appears on click', async () => {
 
 ## Events
 
-Events can be tested using spy functions, like those provided by
-[`vi.fn()`][vi-fn]. Function props are more straightforward to use and test than
-events, so consider using them if they make sense for your project.
+Events can be tested using spy functions. 
+If you're using Vitest you can use [`vi.fn()`][vi-fn] to create a spy.
+
+:::info
+
+Consider using function props to make testing events easier.
+
+:::
 
 ```html title="button-with-event.svelte"
 <button on:click>click me</button>

From b21b0db479cd556c0e0b76fe51d39702110c329f Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael@cousins.io>
Date: Tue, 13 Feb 2024 15:19:45 -0500
Subject: [PATCH 5/5] fixup: prettier

---
 docs/svelte-testing-library/example.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx
index ece0f1271..639e55d81 100644
--- a/docs/svelte-testing-library/example.mdx
+++ b/docs/svelte-testing-library/example.mdx
@@ -71,8 +71,8 @@ test('greeting appears on click', async () => {
 
 ## Events
 
-Events can be tested using spy functions. 
-If you're using Vitest you can use [`vi.fn()`][vi-fn] to create a spy.
+Events can be tested using spy functions. If you're using Vitest you can use
+[`vi.fn()`][vi-fn] to create a spy.
 
 :::info