From cc2bdb5e94cc394e2194a99bd8cf826c5db3a8c3 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 8 Aug 2024 11:04:36 +0100 Subject: [PATCH] docs: link to vue test utils docs for `mountSuspended` (#28463) --- docs/1.getting-started/11.testing.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/1.getting-started/11.testing.md b/docs/1.getting-started/11.testing.md index dc4a41c3fe..cfa5ba9103 100644 --- a/docs/1.getting-started/11.testing.md +++ b/docs/1.getting-started/11.testing.md @@ -161,7 +161,13 @@ export default defineVitestConfig({ #### `mountSuspended` -`mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example: +`mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. + +::alert{type=info} +Under the hood, `mountSuspended` wraps `mount` from `@vue/test-utils`, so you can check out [the Vue Test Utils documentation](https://test-utils.vuejs.org/guide/) for more on the options you can pass, and how to use this utility. +:: + +For example: ```ts twoslash import { it, expect } from 'vitest' @@ -207,6 +213,7 @@ it('can also mount an app', async () => { `renderSuspended` allows you to render any Vue component within the Nuxt environment using `@testing-library/vue`, allowing async setup and access to injections from your Nuxt plugins. This should be used together with utilities from Testing Library, e.g. `screen` and `fireEvent`. Install [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro) in your project to use these. + Additionally, Testing Library also relies on testing globals for cleanup. You should turn these on in your [Vitest config](https://vitest.dev/config/#globals). The passed in component will be rendered inside a `
`. @@ -266,7 +273,9 @@ mockNuxtImport('useStorage', () => { // your tests here ``` -> **Note**: `mockNuxtImport` can only be used once per mocked import per test file. It is actually a macro that gets transformed to `vi.mock` and `vi.mock` is hoisted, as described [here](https://vitest.dev/api/vi.html#vi-mock). +::alert{type=info} +`mockNuxtImport` can only be used once per mocked import per test file. It is actually a macro that gets transformed to `vi.mock` and `vi.mock` is hoisted, as described [here](https://vitest.dev/api/vi.html#vi-mock). +:: If you need to mock a Nuxt import and provide different implementations between tests, you can do it by creating and exposing your mocks using [`vi.hoisted`](https://vitest.dev/api/vi.html#vi-hoisted), and then use those mocks in `mockNuxtImport`. You then have access to the mocked imports, and can change the implementation between tests. Be careful to [restore mocks](https://vitest.dev/api/mock.html#mockrestore) before or after each test to undo mock state changes between runs.