docs(fr): improved docs with the latest changes

docs/.vitepress/config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vitepress';
 import { frLocaleConfig } from "../fr/.vitepress/locale-config";
-import packageJSON from '../../package.json';
 
 export default defineConfig({
   title: `Vue Test Utils`,
@@ -131,5 +130,97 @@ export default defineConfig({
         facetFilters: ['tags:next']
       }
     },
+    nav: [
+      { text: 'Guide', link: '/guide/' },
+      { text: 'API Reference', link: '/api/' },
+      { text: 'Migrating from Vue 2', link: '/migration/' },
+      {
+        text: 'Changelog',
+        link: 'https://github.com/vuejs/test-utils/releases'
+      }
+    ],
+    sidebar: [
+      {
+        text: 'Installation',
+        link: '/installation/'
+      },
+      {
+        text: 'Essentials',
+        collapsable: false,
+        children: [
+          { text: 'Getting Started', link: '/guide/' },
+          { text: 'A Crash Course', link: '/guide/essentials/a-crash-course' },
+          {
+            text: 'Conditional Rendering',
+            link: '/guide/essentials/conditional-rendering'
+          },
+          {
+            text: 'Testing Emitted Events',
+            link: '/guide/essentials/event-handling'
+          },
+          { text: 'Testing Forms', link: '/guide/essentials/forms' },
+          {
+            text: 'Passing Data to Components',
+            link: '/guide/essentials/passing-data'
+          },
+          {
+            text: 'Write components that are easy to test',
+            link: '/guide/essentials/easy-to-test'
+          }
+        ]
+      },
+      {
+        text: 'Vue Test Utils in depth',
+        collapsable: false,
+        children: [
+          { text: 'Slots', link: '/guide/advanced/slots' },
+          {
+            text: 'Asynchronous Behavior',
+            link: '/guide/advanced/async-suspense'
+          },
+          {
+            text: 'Making HTTP Requests',
+            link: '/guide/advanced/http-requests'
+          },
+          { text: 'Transitions', link: '/guide/advanced/transitions' },
+          {
+            text: 'Component Instance',
+            link: '/guide/advanced/component-instance'
+          },
+          {
+            text: 'Reusability and Composition',
+            link: '/guide/advanced/reusability-composition'
+          },
+          { text: 'Testing v-model', link: '/guide/advanced/v-model' },
+          { text: 'Testing Vuex', link: '/guide/advanced/vuex' },
+          { text: 'Testing Vue Router', link: '/guide/advanced/vue-router' },
+          { text: 'Testing Teleport', link: '/guide/advanced/teleport' },
+          {
+            text: 'Stubs and Shallow Mount',
+            link: '/guide/advanced/stubs-shallow-mount'
+          },
+          { text: 'Server-side rendering', link: '/guide/advanced/ssr' }
+        ]
+      },
+      {
+        text: 'Extending Vue Test Utils',
+        collapsable: false,
+        children: [
+          { text: 'Plugins', link: '/guide/extending-vtu/plugins' },
+          {
+            text: 'Community and Learning',
+            link: '/guide/extending-vtu/community-learning'
+          }
+        ]
+      },
+      {
+        text: 'Migrating from Vue 2',
+        link: '/migration/'
+      },
+      {
+        text: 'API Reference',
+        link: '/api/'
+      }
+    ]
   }
 })

docs/fr/.vitepress/locale-config.ts

@@ -71,7 +71,8 @@ const frLocaleConfig: DefaultTheme.LocaleConfig & Omit<DefaultTheme.Config, "loc
         {
           text: 'Composants de Substitution (Stubs) et Montage Partiel',
           link: '/fr/guide/advanced/stubs-shallow-mount'
-        }
+        },
+        { text: 'Tester le Rendu côté Serveur (SSR)', link: '/fr/guide/advanced/ssr' }
       ]
     },
     {

docs/fr/api/index.md

@@ -338,7 +338,7 @@ type GlobalMountOptions = {
 };
 ```
 
-Vous pouvez configurer toutes les options `global` à la fois pour chaque test mais aussi pour l'ensemble des tests. [Voir comment configurer les valeurs par défaut à l'échelle du projet](#config-global).
+Vous pouvez configurer toutes les options `global` à la fois pour chaque test, mais aussi pour l'ensemble des tests. [Voir comment configurer les valeurs par défaut à l'échelle du projet](#config-global).
 
 #### global.components
 
@@ -412,7 +412,7 @@ config?: Partial<Omit<AppConfig, 'isNativeTag'>>
 
 #### global.directives
 
-Enregistre une [directive](https://v3.vuejs.org/api/directives.html#directives)  de manière globale pour le composant monté.
+Enregistre une [directive](https://v3.vuejs.org/api/directives.html#directives) de manière globale pour le composant monté.
 
 **Signature :**
 
@@ -1796,6 +1796,12 @@ await wrapper.trigger('keydown', { keyCode: 65 });
 Vous devriez utiliser `await` lorsque vous appelez `trigger` pour vous assurer que Vue met à jour le DOM avant de faire une vérification.
 :::
 
+::: warning
+Certains événements, comme le fait de cliquer sur une case à cocher pour modifier son `v-model`, ne fonctionneront que si le test utilise `attachTo: document.body`.
+
+Sinon, l'événement `change` ne sera pas déclenché et la valeur de `v-model` ne changera pas en conséquence.
+:::
+
 ### unmount
 
 Démonte l'application du DOM.
@@ -1885,7 +1891,7 @@ function shallowMount(Component, options?: MountingOptions): VueWrapper
 **Signature :**
 
 ```ts
-enableAutoUnmount(hook: Function));
+enableAutoUnmount(hook: (callback: () => void) => void);
 disableAutoUnmount(): void;
 ```
 
@@ -2018,6 +2024,6 @@ const wrapper = mount(Component, {
 expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path');
 ```
 
-**Utilisation avec slot:**
+**Utilisation avec slot :**
 
 Le composant `RouterLinkStub` prend en charge le contenu du `slot` et renvoie des valeurs très simples pour ses propriétés de `slot`. Si vous avez besoin de valeurs de propriétés de `slot` plus spécifiques pour vos tests, il est conseillé d'utiliser un [vrai routeur](../guide/advanced/vue-router.html#using-a-real-router) pour pouvoir utiliser un vrai composant `router-link`. Alternativement, vous pouvez définir votre propre composant `RouterLinkStub` en copiant l'implémentation de la dépendance `test-utils`.

docs/fr/guide/advanced/async-suspense.md

@@ -1,8 +1,8 @@
 # Comportement asynchrone
 
-Vous avez sûrement remarqué que certaines parties de ce guide utilisent `await` lors de l'appel de certaines méthodes sur `wrapper`, telles que `trigger` et `setValue`. De quoi s'agit-il exactement ?
+Vous avez sûrement remarqué que certaines parties de ce guide utilisent `await` lors de l'appel de certaines méthodes de `wrapper`, telles que `trigger` et `setValue`. De quoi s'agit-il exactement ?
 
-Vous savez peut-être que Vue met à jour de manière réactive : lorsque vous changez une valeur, le DOM est automatiquement mis à jour pour refléter la dernière valeur. [Vue effectue ces mises à jour de façon asynchrone](https://v3.vuejs.org/guide/change-detection.html#async-update-queue). En revanche, un exécuteur de test tel que Jest s'exécute de manière `synchrone`. Cela peut causer des résultats inattendus dans les tests.
+Vous savez peut-être que Vue met à jour de manière réactive : lorsque vous changez une valeur, le DOM est automatiquement mis à jour pour refléter la dernière valeur. [Vue effectue ces mises à jour de façon asynchrone](https://v3.vuejs.org/guide/change-detection.html#async-update-queue). En revanche, un gestionnaire de tests tel que Jest s'exécute de façon `synchrone`. Cela peut causer des résultats inattendus dans les tests.
 
 Examinons certaines stratégies pour garantir que Vue met à jour le DOM comme prévu lorsque nous exécutons nos tests.
 
@@ -41,7 +41,7 @@ test('incrémente de 1', () => {
 });
 ```
 
-Étonnement, cela échoue ! La raison est simple : bien que `count` soit augmenté, Vue ne mettra pas à jour le DOM jusqu'au prochain `tick` du cycle d'événement. Pour cette raison, la vérification (`expect()...`) sera appelée avant que Vue ne mette à jour le DOM.
+Bizarrement, le test échoue ! La raison est simple : bien que `count` soit incrémenté, Vue ne mettra pas à jour le DOM jusqu'au prochain `tick` du cycle d'événement. Pour cette raison, la vérification (`expect()...`) sera appelée avant que Vue ne mette à jour le DOM.
 
 :::tip
 Si vous voulez en savoir plus sur ce comportement de base de JavaScript, jetez un œil à [La boucle d'événement: les microtâches et les macrotâches](https://fr.javascript.info/event-loop).
@@ -78,15 +78,14 @@ test('incrémente de 1', async () => {
 
 ## Résoudre d'autres Comportements Asynchrones
 
-`nextTick` est utile pour s'assurer que des changements dans les données réactives sont reflétés dans le DOM avant de poursuivre le test. Cependant, parfois, vous pouvez souhaiter vous assurer que d'autres comportements asynchrones non liés à Vue sont également terminés.
+`nextTick` est utile pour s'assurer que des changements dans des données réactives sont reflétés dans le DOM avant de poursuivre le test. Cependant, parfois, vous pouvez souhaiter vous assurer que d'autres comportements asynchrones non liés à Vue sont également terminés.
 
 Un exemple courant est une fonction qui retourne une `Promise`. Peut-être avez-vous déjà simulé votre client HTTP `axios` en utilisant `jest.mock` :
 
 ```js
 jest.spyOn(axios, 'get').mockResolvedValue({ data: 'de la donnée simulée !' });
 ```
 
-In this case, Vue has no knowledge of the unresolved Promise, so calling `nextTick` will not work - your assertion may run before it is resolved. For scenarios like this, Vue Test Utils exposes [`flushPromises`](../../api/#flushPromises), which causes all outstanding promises to resolve immediately.
 Dans ce cas, Vue n'a aucune idée si la `Promise` est résolue ou non, donc l'appel à `nextTick` ne fonctionnera pas - votre vérification peut s'exécuter avant qu'elle ne soit résolue. Pour des scénarios de ce genre, Vue Test Utils propose [`flushPromises`](../../api/#flushPromises), qui cause l'exécution immédiate de toutes les `Promise` en attente de résolution.
 
 Regardons un exemple :
@@ -97,18 +96,18 @@ import axios from 'axios';
 
 jest.spyOn(axios, 'get').mockResolvedValue({ data: 'de la donnée simulée !' });
 
-test('utilises une méthode pour simuler la méthode d\'axios et flushPromises', async () => {
+test('utilise une méthode pour simuler la méthode d\'axios et flushPromises', async () => {
   // le composant appelle la méthode de `axios` lorsque le composant est créé.
   const wrapper = mount(AxiosComponent);
 
-  await flushPromises() // la `Promise` de la méthode Axios est résolue immédiatement
+  await flushPromises() // la `Promise` de la méthode Axios est résolue immédiatement.
 
   // après cette ligne, la requête axios est résolue avec la donnée simulée.
-})
+});
 ```
 
 :::tip
-Si vous souhaitez en savoir plus sur les tests de requêtes sur les composants, assurez-vous de consulter la section [Faire des requêtes HTTP](http-requests.md).
+Si vous souhaitez en savoir plus sur les tests de requêtes sur les composants, assurez-vous de consulter la section [Faire des requêtes HTTP](/fr/guide/advanced/http-requests.html).
 :::
 
 ## Tester un `setup` asynchrone
@@ -142,7 +141,7 @@ test('Composant async', () => {
 ## Conclusion
 
 - Vue met à jour le DOM de manière asynchrone ; les tests, au contraire, s'exécutent de manière synchrone.
-- Utilisez `await nextTick() pour vous assurer que le DOM a été mis à jour avant la continuation des tests.
+- Utilisez `await nextTick()` pour vous assurer que le DOM a été mis à jour avant de continuer des tests.
 - Les fonctions qui peuvent mettre à jour le DOM (comme `trigger` et `setValue`) renvoient `nextTick`, il est donc nécessaire de les `await`.
 - Utilisez `flushPromises` de Vue Test Utils pour résoudre les promesses non résolues provenant de dépendances non-Vue (telles que les requêtes API).
 - Utilisez `Suspense` pour tester les composants avec un `setup` asynchrone.

docs/fr/guide/advanced/component-instance.md

@@ -13,7 +13,7 @@ test('affiche une salutation', () => {
     props: ['msg1'],
     data() {
       return {
-        msg2: 'tout le monde'
+        msg2: 'tout le monde',
       };
     },
   };
@@ -43,7 +43,7 @@ Nous retrouvons à la fois `msg1` et `msg2` ! D'autres éléments comme les `met
 
 ## Utilisation avec `getComponent` et `findComponent`
 
-`getComponent` et `findComponent` retourne un `VueWrapper` - semblable à celui que nous retourne `mount()`. This means you can also access all the same properties, including `vm`, on the result of `getComponent` or `findComponent`.
+`getComponent` et `findComponent` retourne un `VueWrapper` - semblable à celui que nous retourne `mount()`. Cela veut dire que vous pouvez accéder aux mêmes propriétés, incluant `vm`, par le résultat de `getComponent` ou `findComponent`.
 
 Prenons un exemple simple :
 
@@ -66,7 +66,7 @@ test('vérifie que les bonnes props sont passées', () => {
 });
 ```
 
-Une manière plus approfondie de tester cela consisterait à vérifier par rapport au contenu affiché. En faisant cela, vous affirmez que la bonne `prop` est passée et affichée.
+Une manière plus approfondie de tester cela consisterait à vérifier par rapport au contenu affiché. En faisant cela, vous vérifiez que la bonne `prop` est passée et affichée.
 
 ::: tip
 Note : si vous utilisez un composant `<script setup>`, `vm` ne sera pas disponible. C'est parce que les composants `<script setup>` sont [fermés par défaut](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#exposing-components-public-interface). Pour ces composants, et en général, évitez `vm` et faites vos vérifications par rapport à ce qui est affiché.

docs/fr/guide/advanced/http-requests.md

@@ -4,7 +4,7 @@ Les frameworks de tests modernes proposent déjà de nombreuses fonctionnalités
 
 Cependant, il s'agit d'une fonctionnalité importante à tester et il y a quelques pièges à connaître.
 
-Dans cette section, nous explorons certains modèles pour effectuer, simuler et vérifier les requêtes HTTP.
+Dans cette section, nous explorons certains exemples pour effectuer, simuler et vérifier les requêtes HTTP.
 
 ## Une liste d'articles d'un blog
 
@@ -40,7 +40,7 @@ export default {
 
 Il y a plusieurs choses à faire pour tester correctement ce composant.
 
-Notre premier objectif est de tester ce composant **sans appeler réellement l'API**. Cela créerait un test fragile et potentiellement lent.
+Notre premier objectif est de tester ce composant **sans réellement appeler l'API**. Cela créerait un test fragile et potentiellement lent.
 
 Dans un second temps, nous devons vérifier que le composant a effectué le bon appel avec les paramètres appropriés. Nous n'obtiendrons pas de résultats de cette API, mais nous devons toujours nous assurer d'avoir demandé les bonnes ressources.
 
@@ -160,9 +160,9 @@ test('affiche le message de chargement pendant le téléchargement', async () =>
 
 Un scénario typique pour des applications plus complexes consiste à déclencher une action Vuex qui effectue la requête HTTP.
 
-Cela n'est pas différent de l'exemple décrit ci-dessus. Nous pouvons vouloir charger le `store` tel quel et simuler (`mock`) des services tels que `axios`. De cette façon, nous simulons les limites de notre système, ce qui nous permet d'avoir un plus haut degré de confiance dans nos tests.
+Cela n'est pas différent de l'exemple décrit ci-dessus. Nous pouvons vouloir charger le `store` tel quel et simuler (`mocker`) des services tels que `axios`. De cette façon, nous simulons les limites de notre système, ce qui nous permet d'avoir un plus haut degré de confiance dans nos tests.
 
-Vous pouvez consulter la documentation [Tester Vuex](vuex.md) pour plus d'informations sur les tests Vuex avec Vue Test Utils.
+Vous pouvez consulter la documentation [Tester Vuex](./vuex.md) pour plus d'informations sur les tests Vuex avec Vue Test Utils.
 
 ## Conclusion
 

docs/fr/guide/advanced/reusability-composition.md

@@ -105,7 +105,7 @@ provide('ma-clef', 'données');
 Dans ce cas, vous pouvez soit rendre un composant enfant et tester une utilisation correcte de `provide`, soit créer un simple composant d'aide aux tests et le passer dans le `slot` par défaut.
 
 ```typescript
-test('fourni de la donnée correcte', () => {
+test('fournit de la donnée correcte', () => {
   const TestComponent = defineComponent({
     template: '<span id="provide-test">{{value}}</span>',
     setup () {
@@ -124,7 +124,7 @@ test('fourni de la donnée correcte', () => {
 });
 ```
 
-Si votre composant ne contient pas de `slot`, vous pouvez utiliser un composant de remplacement (`stub`) et remplacer un composant enfant par votre composant de test :
+Si votre composant ne contient pas de `slot`, vous pouvez utiliser un composant de substitution (`stub`) et remplacer un composant enfant par votre composant de test :
 
 ```vue
 <template>
@@ -143,7 +143,7 @@ provide('my-key', 'some-data');
 Le test sera :
 
 ```typescript
-test('fournir de la donnée correcte', () => {
+test('fournit de la donnée correcte', () => {
   const TestComponent = defineComponent({
     template: '<span id="provide-test">{{value}}</span>',
     setup () {
@@ -192,7 +192,7 @@ test('affiche de la donnée correcte', () => {
     },
   });
 
-  expect(wrapper.text()).toBe('some-data');
+  expect(wrapper.text()).toBe('données');
 });
 ```
 

docs/fr/guide/advanced/slots.md

@@ -18,8 +18,8 @@ const Layout = {
         Merci de votre visite.
       </footer>
     </div>
-  `
-}
+  `,
+};
 ```
 
 Vous pourriez vouloir écrire un test pour vous assurer que le contenu du `slot` par défaut est bien affiché. VTU fournit l'option de `mount()`: `slots`.
@@ -36,7 +36,7 @@ test('affiche le slot par défaut', () => {
 });
 ```
 
-Le test passe ! Dans cet exemple, nous transmettons du contenu texte au `slot` par défaut. Si vous voulez être encore plus spécifique et vérifier que le contenu du `slot` par défaut est rendu à l'intérieur de `<main>`, vous pourriez changer la vérification :
+Le test passe ! Dans cet exemple, nous transmettons du texte au `slot` par défaut. Si vous voulez être encore plus spécifique et vérifier que le contenu du `slot` par défaut est rendu à l'intérieur de `<main>`, vous pourriez changer la vérification :
 
 ```js
 test('affiche le slot par défaut', () => {
@@ -126,8 +126,8 @@ test('affiche la page entière', () => {
       main: h('div', 'Contenu principal'),
       sidebar: { template: '<div>Barre latérale</div>' },
       footer: '<div>Pied de page</div>',
-    }
-  })
+    },
+  });
 
   expect(wrapper.html()).toContain('<div>Haut de page</div>');
   expect(wrapper.html()).toContain('<div>Contenu principal</div>');
@@ -139,7 +139,7 @@ test('affiche la page entière', () => {
 
 ## Slots à portée limitée (Scoped Slots)
 
-[Les slots à portée limitée](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) et les `bindings` sont aussi supportés par VTU. 
+[Les slots à portée limitée](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) et les liaisons de données (`bindings`) sont aussi supportés par VTU. 
 
 ```js
 const ComponentWithSlots = {