.github/workflows/ci.yml

@@ -16,14 +16,12 @@ jobs:
 
     strategy:
       matrix:
-        node: [18, 20]
+        node: [18, 20, 22]
 
     steps:
     - uses: actions/checkout@v4
     - name: Install pnpm
       uses: pnpm/action-setup@v3.0.0
-      with:
-        version: 8.6.3
     - name: Use Node.js ${{ matrix.node }}
       uses: actions/setup-node@v4
       with:

README.md

@@ -24,3 +24,20 @@ See the [docs](https://test-utils.vuejs.org/).
 ## Development
 
 Get started by running `pnpm install`. You can run the tests with `pnpm test`. That's it!
+
+## Contributing Docs
+
+All the documentation files can be found in `packages/docs`. It contains the English markdown files while translation(s) are stored in their corresponding `<lang>` sub-folder(s):
+
+- [`fr`](https://github.com/vuejs/test-utils/tree/main/packages/docs/fr): French translation.
+
+Besides that, the `.vitepress` sub-folder contains the config and theme, including the i18n information.
+
+- `pnpm docs:dev`: Start the docs dev server.
+- `pnpm docs:build`: Build the docs.
+
+To add or maintain the translations, we follow the [Vue Ecosystem Translation Guidelines](https://github.com/vuejs-translations/guidelines/blob/main/README_ECOSYSTEM.md).
+
+- `pnpm docs:translation:status [<lang>]`: Show the translation status for your language. If you don't specify a language, it will show the status for all languages.
+- `pnpm docs:translation:compare <lang>`: Compare the docs with the latest checkpoint for your language.
+- `pnpm docs:translation:update <lang> [<commit>]`: Update the checkpoint for your language. The checkpoint will be set by the latest commit hash. However, you can also specify a commit hash manually.

docs/.vitepress/theme/index.mts

@@ -0,0 +1,18 @@
+import { h } from 'vue'
+import Theme from 'vitepress/theme'
+import TranslationStatus from 'vitepress-translation-helper/ui/TranslationStatus.vue'
+import status from '../translation-status.json'
+
+const i18nLabels = {
+  fr: 'La traduction est synchronisée avec les docs du ${date} dont le hash du commit est <code>${hash}</code>.',
+}
+
+
+export default {
+  ...Theme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'doc-before': () => h(TranslationStatus, { status, i18nLabels }),
+    })
+  },
+}

docs/.vitepress/translation-status.json

@@ -0,0 +1,6 @@
+{
+  "fr": {
+    "hash": "e3105bf",
+    "date": "2024-03-20"
+  }
+}

docs/api/index.md

@@ -14,7 +14,7 @@ Note that when mocking dates/timers with Vitest, this must be called after
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)
@@ -74,7 +74,7 @@ Specify the node to mount the component on. This is not available when using `re
 **Signature:**
 
 ```ts
-attachTo?: HTMLElement | string
+attachTo?: Element | string
 ```
 
 **Details:**
@@ -829,9 +829,9 @@ test('shallow', () => {
   const wrapper = mount(Component, { shallow: true })
 
   expect(wrapper.html()).toEqual(
-    `<a-component-stub></a-component-stub><another-component></another-component>`
+    `<a-component-stub></a-component-stub><another-component-stub></another-component-stub>`
   )
-}
+})
 ```
 
 ::: tip
@@ -1278,9 +1278,9 @@ get(selector: string): Omit<DOMWrapper<Element>, 'exists'>
 
 **Details:**
 
-It is similar to `find`, but `get` throws instead of returning a ErrorWrapper.
+It is similar to `find`, but `get` throws an error if an element is not found while [`find`](#find) will return an ErrorWrapper.
 
-As a rule of thumb, always use get except when you are asserting something doesn't exist. In that case use [`find`](#find).
+As a rule of thumb, always use `get` except when you are asserting something doesn't exist. In that case use [`find`](#find).
 
 `Component.vue`:
 
@@ -1436,7 +1436,7 @@ isVisible(): boolean
 **Details:**
 
 ::: warning
-`isVisible()` only works correctly if the wrapper is attached to the DOM using [`attachTo`](#attachto)
+`isVisible()` only works correctly if the wrapper is attached to the DOM using [`attachTo`](#attachTo)
 :::
 
 ```js
@@ -1445,9 +1445,11 @@ const Component = {
 }
 
 test('isVisible', () => {
-  const wrapper = mount(Component)
+  const wrapper = mount(Component, {
+    attachTo: document.body
+  });
 
-  expect(wrapper.find('span').isVisible()).toBe(false)
+  expect(wrapper.find('span').isVisible()).toBe(false);
 })
 ```
 
@@ -1882,7 +1884,7 @@ Creates a Wrapper that contains the mounted and rendered Vue component to test w
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)

docs/fr/api/index.md

@@ -12,7 +12,7 @@ Crée un `Wrapper` qui contient le composant Vue monté et rendu pour le test.
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)
@@ -72,7 +72,7 @@ Spécifie le nœud où monter le composant.
 **Signature&nbsp;:**
 
 ```ts
-attachTo?: HTMLElement | string
+attachTo?: Element | string
 ```
 
 **Utilisation&nbsp;:**
@@ -825,7 +825,7 @@ test('shallow', () => {
   const wrapper = mount(Component, { shallow: true });
 
   expect(wrapper.html()).toEqual(
-    `<a-component-stub></a-component-stub><another-component></another-component>`,
+    `<a-component-stub></a-component-stub><another-component-stub></another-component-stub>`,
   );
 });
 ```
@@ -1429,13 +1429,19 @@ isVisible(): boolean
 
 **Utilisation&nbsp;:**
 
+::: warning
+`isVisible()` ne fonctionne correctement que si le wrapper est attaché au DOM en utilisant [`attachTo`](#attachTo)
+:::
+
 ```js
 const Component = {
   template: `<div v-show="false"><span /></div>`,
 };
 
 test('isVisible', () => {
-  const wrapper = mount(Component);
+  const wrapper = mount(Component, {
+    attachTo: document.body
+  });
 
   expect(wrapper.find('span').isVisible()).toBe(false);
 });
@@ -1870,7 +1876,7 @@ Crée un `Wrapper` qui contient le composant Vue monté et rendu pour le tester
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
-  attachTo?: HTMLElement | string
+  attachTo?: Element | string
   attrs?: Record<string, unknown>
   data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
   props?: (RawProps & Props) | ({} extends Props ? null : never)

docs/fr/guide/advanced/teleport.md

@@ -101,7 +101,7 @@ beforeEach(() => {
 
 afterEach(() => {
   // nous nettoyons un peu
-  document.body.outerHTML = '';
+  document.body.innerHTML = '';
 });
 
 test('teleport', async () => {
@@ -174,7 +174,7 @@ beforeEach(() => {
 
 afterEach(() => {
   // nous nettoyons un peu
-  document.body.outerHTML = '';
+  document.body.innerHTML = '';
 });
 
 test('teleport', async () => {

docs/fr/migration/index.md

@@ -288,3 +288,49 @@ Si vous utilisez les tests `snapshot` et que les commentaires restent dans vos `
     };
     ```
  - Avec `@vue/test-utils` [`mountingOptions.global.config`](https://test-utils.vuejs.org/fr/api/#global) soit de façon globale ou pour chaque test individuellement.
+
+## Comparaison avec la v1
+
+Cette table est destinée à ceux qui viennent de VTU v1, afin de comparer les deux APIs.
+
+### API de base
+
+| export            | notes                                                                            |
+|-------------------|----------------------------------------------------------------------------------|
+| enableAutoDestroy | remplacé par `enableAutoUnmount`                                                 |
+
+### Options de `mount`
+
+| option           | notes                                                                                 |
+|------------------|---------------------------------------------------------------------------------------|
+| mocks            | imbriqué dans `global`                                                                |
+| propsData        | maintenant appelé `props`                                                             |
+| provide          | imbriqué dans `global`                                                                |
+| mixins           | imbriqué dans `global`                                                                |
+| plugins          | imbriqué dans `global`                                                                |
+| component        | imbriqué dans `global`                                                                |
+| directives       | imbriqué dans `global`                                                                |
+| attachToDocument | renommé `attachTo`. Voir [ici](https://github.com/vuejs/vue-test-utils/pull/1492)     |
+| scopedSlots      | supprimé. Les `scopedSlots` sont fusionnés avec `slots` en Vue 3                      |
+| context          | supprimé. Différent de Vue 2, n'a plus de sens.                                       |
+| localVue         | supprimé. Plus nécessaire - en Vue 3, il n'y a pas d'instance globale de Vue à muter. |
+| listeners        | supprimé. N'existe plus en Vue 3                                                      |
+| parentComponent  | supprimé                                                                              |
+
+### API de `Wrapper` (mount)
+
+| méthode         | notes                                                                                                       |
+|----------------|--------------------------------------------------------------------------------------------------------------|
+| find           | seule la syntaxe `querySelector` est supportée. Utilisez `findComponent(Comp)` pour trouver un composant Vue |
+| setValue       | fonctionne pour select, checkbox, radio button, input, textarea. Renvoie `nextTick`.                         |
+| trigger        | renvoie `nextTick`. Vous pouvez faire `await wrapper.find('button').trigger('click')`                        |
+| destroy        | renommé en `unmount` pour correspondre au nom de la fonction du cycle de vie de Vue 3.                       |
+| contains       | supprimé. Utilisez `find`                                                                                    |
+| emittedByOrder | supprimé. Utilisez `emitted`                                                                                 |
+| setSelected    | supprimé. Fait maintenant partie de `setValue`                                                               |
+| setChecked     | supprimé. Fait maintenant partie de `setValue`                                                               |
+| is             | supprimé                                                                                                     |
+| isEmpty        | supprimé. Utilisez des matchers tels que [celui-ci](https://github.com/testing-library/jest-dom#tobeempty)   |
+| isVueInstance  | supprimé                                                                                                     |
+| name           | supprimé                                                                                                     |
+| setMethods     | supprimé                                                                                                     |

docs/guide/advanced/teleport.md

@@ -100,7 +100,7 @@ beforeEach(() => {
 
 afterEach(() => {
   // clean up
-  document.body.outerHTML = ''
+  document.body.innerHTML = ''
 })
 
 test('teleport', async () => {
@@ -173,7 +173,7 @@ beforeEach(() => {
 
 afterEach(() => {
   // clean up
-  document.body.outerHTML = ''
+  document.body.innerHTML = ''
 })
 
 test('teleport', async () => {

docs/guide/advanced/v-model.md

@@ -27,7 +27,7 @@ const Editor = {
 This component will just behave as an input component:
 
 ```js
-const App {
+const App = {
   components: {
     Editor
   },

netlify.toml

@@ -5,3 +5,5 @@
 [build]
   publish = "docs/.vitepress/dist"
   command = "pnpm docs:build"
+[build.environment]
+  NODE_VERSION = "18"

package.json

@@ -33,16 +33,16 @@
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-typescript": "11.1.6",
     "@types/js-beautify": "1.14.3",
-    "@types/node": "20.11.27",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "7.2.0",
+    "@types/node": "20.12.8",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
     "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",
-    "@vitest/coverage-v8": "1.3.1",
-    "@vue/compat": "3.4.21",
-    "@vue/compiler-dom": "3.4.21",
-    "@vue/compiler-sfc": "3.4.21",
-    "@vue/server-renderer": "3.4.21",
+    "@vitest/coverage-v8": "1.5.3",
+    "@vue/compat": "3.4.26",
+    "@vue/compiler-dom": "3.4.26",
+    "@vue/compiler-sfc": "3.4.26",
+    "@vue/server-renderer": "3.4.26",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
@@ -51,18 +51,19 @@
     "jsdom-global": "3.0.2",
     "lint-staged": "15.2.2",
     "prettier": "3.2.5",
-    "reflect-metadata": "0.2.1",
-    "rollup": "4.13.0",
+    "reflect-metadata": "0.2.2",
+    "rollup": "4.17.2",
     "tslib": "2.6.2",
-    "typescript": "5.4.2",
-    "unplugin-vue-components": "0.26.0",
-    "vite": "5.1.6",
-    "vitepress": "1.0.0-rc.45",
-    "vitest": "1.3.1",
-    "vue": "3.4.21",
+    "typescript": "5.4.5",
+    "unplugin-vue-components": "0.27.0",
+    "vite": "5.2.10",
+    "vitepress": "1.1.4",
+    "vitepress-translation-helper": "0.2.1",
+    "vitest": "1.5.3",
+    "vue": "3.4.26",
     "vue-class-component": "8.0.0-rc.1",
-    "vue-router": "4.3.0",
-    "vue-tsc": "2.0.6",
+    "vue-router": "4.3.2",
+    "vue-tsc": "2.0.16",
     "vuex": "4.1.0"
   },
   "author": {
@@ -81,6 +82,9 @@
     "lint:fix": "pnpm run lint --fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
+    "docs:translation:compare": "v-translation compare --status-file=docs/.vitepress/translation-status.json --path={docs/index.md,docs/guide,docs/installation,docs/migration}",
+    "docs:translation:update": "v-translation update --status-file=docs/.vitepress/translation-status.json",
+    "docs:translation:status": "v-translation status --status-file=docs/.vitepress/translation-status.json",
     "vue-tsc": "vue-tsc --noEmit -p tsconfig.volar.json",
     "prepublishOnly": "pnpm run build"
   },
@@ -102,7 +106,7 @@
     "url": "git+https://github.com/vuejs/test-utils.git"
   },
   "homepage": "https://github.com/vuejs/test-utils",
-  "packageManager": "pnpm@8.15.4",
+  "packageManager": "pnpm@9.0.6",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [