Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(vue-router.md): update highlights when mocking real router #2340

Merged
merged 2 commits into from Feb 13, 2024
Merged

fix(vue-router.md): update highlights when mocking real router #2340

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d49ddc6
fix(vue-router.md): update highlights when mocking real router
dmoyadev Feb 13, 2024
c80cd86
fix(vue-router.md): update highlights for vue-router in french
dmoyadev Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/guide/advanced/vue-router.md
View file
Open in desktop
Expand Up @@ -187,7 +187,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39

The `<router-link>` and `<router-view>` component are not found. We need to install Vue Router! Since Vue Router is a plugin, we install it using the `global.plugins` mounting option:

```js {10,11,12}
```js {12,13,14}
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from "@/router" // This import should point to your routes file declared above
Expand Down Expand Up @@ -218,7 +218,7 @@ Although it's not entirely clear from the warning, it's related to the fact that

Vue Router provides an `isReady` function that tell us when router is ready. We can then `await` it to ensure the initial navigation has happened.

```js {11,12}
```js {13,14}
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from "@/router"
Expand Down Expand Up @@ -247,7 +247,7 @@ The test is now passing! It was quite a bit of work, but now we make sure the ap

Now let's navigate to `/posts` and make sure the routing is working as expected:

```js {19,20}
```js {21,22}
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from "@/router"
Expand Down Expand Up @@ -288,7 +288,7 @@ Again, due to Vue Router 4's new asynchronous nature, we need to `await` the rou

In this case, however, there is no _hasNavigated_ hook we can await on. One alternative is to use the `flushPromises` function exported from Vue Test Utils:

```js {1,20}
```js {1,22}
import { mount, flushPromises } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from "@/router"
Expand Down Expand Up @@ -317,7 +317,7 @@ test('routing', async () => {

It _finally_ passes. Great! This is all very manual, however - and this is for a tiny, trivial app. This is the reason using a mocked router is a common approach when testing Vue components using Vue Test Utils. In case you prefer to keep using a real router, keep in mind that each test should use it's own instance of the router like so:

```js {1,20}
```js {1,19}
import { mount, flushPromises } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from "@/router"
Expand Down