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.

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

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

Merged
merged 2 commits into from Feb 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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/fr/guide/advanced/vue-router.md
Expand Up @@ -187,7 +187,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39

Les composants `<router-link>` et `<router-view>` ne sont pas trouvés. Nous devons installer Vue Router&nbsp;! Comme Vue Router est un plugin, nous l'installons en utilisant l'option de `mount`&nbsp;: `global.plugins`&nbsp;:

```js {10,11,12}
```js {12,13,14}
import { mount } from '@vue/test-utils';
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from "@/router"; // Cet import devrait pointer vers votre fichier de configuration des routes.
Expand Down Expand Up @@ -218,7 +218,7 @@ Le `warning` n'est pas très explicite. En fait, cela est lié au fait que **Vue

Vue Router fournit une fonction `isReady` qui nous informe lorsque le routeur est prêt. Nous pouvons alors l'`await` pour nous assurer que la navigation initiale a eu lieu.

```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 @@ Le test passe enfin&nbsp;! Cela a été assez laborieux, mais désormais nous no

Maintenant, allons sur `/posts` et assurons-nous que le routage fonctionne comme prévu&nbsp;:

```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 @@ Une fois de plus, en raison de la nature asynchrone de Vue Router 4, nous devons

Cependant, il n'y a pas de `hook` `hasNavigated` sur lequel nous pouvons `await`. Une alternative est d'utiliser la fonction `flushPromises` exportée de Vue Test Utils&nbsp;:

```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 () => {

Cela passe. Super&nbsp;! Cependant, c'est très laborieux - et cela concerne une petite application triviale. C'est pour cette raison que l'utilisation d'un routeur simulé est une approche courante lors des tests de composants Vue avec Vue Test Utils. Si vous préférez continuer à utiliser un routeur réel, gardez à l'esprit que chaque test doit utiliser son propre instance du routeur de cette manière&nbsp;:

```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
10 changes: 5 additions & 5 deletions docs/guide/advanced/vue-router.md
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