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;:

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.

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.

import { mount } from '@vue/test-utils';

import { createRouter, createWebHistory } from 'vue-router';

import { routes } from "@/router";

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

import { mount } from '@vue/test-utils';

import { createRouter, createWebHistory } from 'vue-router';

import { routes } from "@/router";

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;:

import { mount, flushPromises } from '@vue/test-utils';

import { createRouter, createWebHistory } from 'vue-router';

import { routes } from "@/router";

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;:

import { mount, flushPromises } from '@vue/test-utils';

import { createRouter, createWebHistory } from 'vue-router';

import { routes } from "@/router";

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:

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

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.

import { mount } from '@vue/test-utils'

import { createRouter, createWebHistory } from 'vue-router'

import { routes } from "@/router"

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

import { mount } from '@vue/test-utils'

import { createRouter, createWebHistory } from 'vue-router'

import { routes } from "@/router"

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:

import { mount, flushPromises } from '@vue/test-utils'

import { createRouter, createWebHistory } from 'vue-router'

import { routes } from "@/router"

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:

import { mount, flushPromises } from '@vue/test-utils'

import { createRouter, createWebHistory } from 'vue-router'

import { routes } from "@/router"