From 2d5f757e085b8cb0f0a506bbd70340806f96e3c0 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Wed, 18 Dec 2024 16:57:48 +0300
Subject: [PATCH 01/38] start ru translation

---
 docs/.vitepress/config/index.mts              |  12 +-
 docs/.vitepress/config/ru.mts                 | 128 +++++++++
 docs/.vitepress/theme/index.mts               |   3 +-
 docs/.vitepress/translation-status.json       |   4 +
 docs/ru/guide/essentials/a-crash-course.md    | 261 ++++++++++++++++++
 .../guide/essentials/conditional-rendering.md | 148 ++++++++++
 docs/ru/guide/essentials/event-handling.md    | 156 +++++++++++
 docs/ru/guide/index.md                        |  59 ++++
 docs/ru/index.md                              |  17 ++
 docs/ru/installation/index.md                 |  18 ++
 10 files changed, 803 insertions(+), 3 deletions(-)
 create mode 100644 docs/.vitepress/config/ru.mts
 create mode 100644 docs/ru/guide/essentials/a-crash-course.md
 create mode 100644 docs/ru/guide/essentials/conditional-rendering.md
 create mode 100644 docs/ru/guide/essentials/event-handling.md
 create mode 100644 docs/ru/guide/index.md
 create mode 100644 docs/ru/index.md
 create mode 100644 docs/ru/installation/index.md

diff --git a/docs/.vitepress/config/index.mts b/docs/.vitepress/config/index.mts
index e3fe97898..6bdada4b2 100644
--- a/docs/.vitepress/config/index.mts
+++ b/docs/.vitepress/config/index.mts
@@ -3,6 +3,7 @@ import { frConfig } from './fr.mts'
 import { zhConfig } from './zh.mts'
 import { sharedConfig } from './shared.mts'
 import { defineConfig } from 'vitepress'
+import { ruConfig } from './ru.mts'
 
 export default defineConfig({
   ...sharedConfig,
@@ -10,6 +11,13 @@ export default defineConfig({
   locales: {
     root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
     fr: { label: 'Français', lang: 'fr-FR', link: '/fr/', ...frConfig },
-    zh: { label: '简体中文 (校对中)', lang: 'zh-CN', link: '/zh/', ...zhConfig }
-  }
+    zh: {
+      label: '简体中文 (校对中)',
+      lang: 'zh-CN',
+      link: '/zh/',
+      ...zhConfig
+    },
+    ru: { label: 'Русский', lang: 'ru-RU', link: '/ru/', ...ruConfig }
+  },
+
 })
diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
new file mode 100644
index 000000000..e0624c9af
--- /dev/null
+++ b/docs/.vitepress/config/ru.mts
@@ -0,0 +1,128 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+export const META_URL = ''
+export const META_TITLE = 'Vue Test Utils'
+export const META_DESCRIPTION = 'Официальный набор инструментов тестирования для Vue.js 3'
+
+export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  description: META_DESCRIPTION,
+  head: [
+    ['meta', { property: 'og:url', content: META_URL }],
+    ['meta', { property: 'og:title', content: META_TITLE }],
+    ['meta', { property: 'og:description', content: META_DESCRIPTION }],
+    ['meta', { property: 'twitter:url', content: META_URL }],
+    ['meta', { property: 'twitter:title', content: META_TITLE }],
+    ['meta', { property: 'twitter:description', content: META_DESCRIPTION }]
+  ],
+  themeConfig: {
+    docFooter: {
+      prev: 'Предыдущая',
+      next: 'Следующая',
+    },
+    outlineTitle: "Содержание",
+    editLink: {
+      pattern: 'https://github.com/vuejs/test-utils/edit/main/docs/:path',
+      text: 'Предложить перевод страницы на GitHub'
+    },
+    nav: [
+      { text: 'Руководство', link: '/ru/guide/' },
+      { text: 'API', link: '/api/' },
+      { text: 'Миграция с Vue 2', link: '/migration/' },
+      {
+        text: 'Changelog',
+        link: 'https://github.com/vuejs/test-utils/releases'
+      }
+    ],
+    sidebar: {
+      '/': [
+        {
+          text: 'Установка',
+          link: '/ru/installation/'
+        },
+        {
+          text: 'Основы',
+          items: [
+            { text: 'Приступая к изучению', link: '/ru/guide/' },
+            {
+              text: 'Ускоренный курс',
+              link: '/ru/guide/essentials/a-crash-course'
+            },
+            {
+              text: 'Условная отрисовка',
+              link: '/ru/guide/essentials/conditional-rendering'
+            },
+            {
+              text: 'Тестирование генерации событий',
+              link: '/ru/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: 'Углубленно',
+          items: [
+            { 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: 'Testing Server-side Rendering',
+              link: '/guide/advanced/ssr'
+            }
+          ]
+        },
+        {
+          text: 'Дополнительные темы',
+          items: [
+            { text: 'Плагины', link: '/guide/extending-vtu/plugins' },
+            {
+              text: 'Сообщество и обучение',
+              link: '/guide/extending-vtu/community-learning'
+            }
+          ]
+        },
+        {
+          text: 'Ответы на вопросы',
+          link: '/guide/faq/'
+        },
+        {
+          text: 'Миграция с Vue 2',
+          link: '/migration/'
+        },
+        {
+          text: 'API руководство',
+          link: '/api/'
+        }
+      ]
+    }
+  }
+}
diff --git a/docs/.vitepress/theme/index.mts b/docs/.vitepress/theme/index.mts
index 30162d817..b3cf94124 100644
--- a/docs/.vitepress/theme/index.mts
+++ b/docs/.vitepress/theme/index.mts
@@ -5,7 +5,8 @@ import status from '../translation-status.json'
 import './custom.css'
 const i18nLabels = {
   fr: 'La traduction est synchronisée avec les docs du ${date} dont le hash du commit est <code>${hash}</code>.',
-  zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。<br /><mark>同时该文档仍处于校对中，如有任何疑问或想参与校对工作，请<a href="https://github.com/vuejs/test-utils/issues/2561" target="_blank" style="font-weight: bold; text-decoration: underline;">移步这里</a>了解更多。</mark>'
+  zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。<br /><mark>同时该文档仍处于校对中，如有任何疑问或想参与校对工作，请<a href="https://github.com/vuejs/test-utils/issues/2561" target="_blank" style="font-weight: bold; text-decoration: underline;">移步这里</a>了解更多。</mark>',
+  ru: "Последняя дата обновления документации: ${date}"
 }
 
 
diff --git a/docs/.vitepress/translation-status.json b/docs/.vitepress/translation-status.json
index b7a6d4c97..05c9fedaf 100644
--- a/docs/.vitepress/translation-status.json
+++ b/docs/.vitepress/translation-status.json
@@ -6,5 +6,9 @@
   "zh": {
     "hash": "7c55128",
     "date": "2024-11-28"
+  },
+  "ru": {
+    "hash": "96ef276",
+    "date": "2024-12-09"
   }
 }
\ No newline at end of file
diff --git a/docs/ru/guide/essentials/a-crash-course.md b/docs/ru/guide/essentials/a-crash-course.md
new file mode 100644
index 000000000..460518897
--- /dev/null
+++ b/docs/ru/guide/essentials/a-crash-course.md
@@ -0,0 +1,261 @@
+# Ускоренный курс
+
+Давайте уже начнем! Давайте изучим Vue Test Utils (VTU), создав простое Todo приложение и напишем тесты по ходу дела. Это руководство покажет, как:
+
+- Добавлять компоненты
+- Находить элементы
+- Заполнять формы
+- Вызывать события
+
+## Приступая к изучению
+
+Мы начнем с простого `TodoApp` компонента с единственной задачей:
+
+```vue
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'TodoApp',
+
+  data() {
+    return {
+      todos: [
+        {
+          id: 1,
+          text: 'Learn Vue.js 3',
+          completed: false
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## Первый тест - задача отрисована
+
+Первый тест, который мы напишем будет проверка отрисовки задачи. Давайте посмотрим первый тест, далее обсудим каждую часть:
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('renders a todo', () => {
+  const wrapper = mount(TodoApp)
+
+  const todo = wrapper.get('[data-test="todo"]')
+
+  expect(todo.text()).toBe('Learn Vue.js 3')
+})
+```
+
+Мы начнем с импортирования `mount` - это главный способ отрисовать компонент. Вы объявляете тест при помощи `test` функции, с коротким описанием теста. `test` и `expect` глобально доступны в большинстве программ тестирования (в этом примере используем [Jest](https://jestjs.io/en/)). Если `test` и `expect` выглядит непонятно, Jest документация имеет [больше простых примеров](https://jestjs.io/docs/en/getting-started) как использовать и работать с ними.
+
+Далее мы вызываем `mount` и передаем компонент в качестве первого аргумента - это то, что вам придется делать почти в каждом тесте. По соглашению, мы присваиваем результат переменной с названием `wrapper`, поскольку `mount` предоставляет простой "wrapper" вокруг приложения с некоторыми удобными методами для тестирования.
+
+Наконец, мы используем другой глобальный метод общий для многих программ тестирования, в том числе и Jest, - `expect`. Идея в том, что мы утверждаем или _ожидаем_, что реальное значение будет таким, каким мы его себе представляем. В данном случае, мы ищем html-элемент с селектором `data-test="todo"` в DOM (Document Object Model), это будет выглядеть примерно так: `<div data-test="todo">...</div>`. После, мы вызываем `text` метод для получения содержимого, которое мы ожидаем: `'Learn Vue.js 3'`.
+
+> Использование `data-test` селекторов не обязательно, но это может сделать твои тесты более гибкими. Классы и идентификаторы меняются по мере роста приложения, но при использовании `data-test` другими разработчиками будет более понятно, что эти элементы нужны для тестов и не должны изменяться.
+
+## Делаем тест успешным
+
+Если мы запустим этот тест, то он выполниться с такой ошибкой: `Unable to get [data-test="todo"]` (`Не удалось получить [data-test="todo"]`). Потому что мы не отрисовываем никакую задачу, поэтому вызов `get()` возвращается с ошибкой и не возвращает "wrapper" (помните, что VTU оборачивает все компоненты и DOM элементы в "wrapper" с некоторыми удобными методами). Давайте обновим `<template>` в `TodoApp.vue` для отрисовки `todos` массива:
+
+```vue
+<template>
+  <div>
+    <div v-for="todo in todos" :key="todo.id" data-test="todo">
+      {{ todo.text }}
+    </div>
+  </div>
+</template>
+```
+
+С этим изменением, тест пройден. Поздравляю! Вы написали свой первый тест для компонента.
+
+## Добавление новой задачи
+
+Следующий сценарий, который мы добавим для пользователя, будет создание новой задачи. Чтобы так сделать, нам нужна форма с полями ввода для пользователя, чтобы ввести какой-то текст. Когда пользователь подтвердит отправку формы, мы ожидаем новую отрисованную задачу. Давай взгляним на этот тест:
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('creates a todo', () => {
+  const wrapper = mount(TodoApp)
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
+
+  wrapper.get('[data-test="new-todo"]').setValue('New todo')
+  wrapper.get('[data-test="form"]').trigger('submit')
+
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+})
+```
+
+Как обычно, мы начинаем с использования `mount` для отрисовки компонента. Мы также проверяем, что отрисована одна задача - это дает понять, что мы добавим далее еще одну, как видно из последней строки.
+
+Чтобы обновить `<input>`, мы используем `setValue` - он позволяет нам установить значение поля.
+
+После обновления `<input>` мы используем `trigger` метод для имитирования подтверждения формы пользователем. И,наконец, мы проверяем, что число отрисованных задач увеличилось с 1 до 2.
+
+Если мы запустим этот тест, то очивидно будет ошибка. Давайте обновим `TodoApp.vue` для создания `<form>`, `<input>` элементов и пройти тест успешно:
+
+```vue
+<template>
+  <div>
+    <div v-for="todo in todos" :key="todo.id" data-test="todo">
+      {{ todo.text }}
+    </div>
+
+    <form data-test="form" @submit.prevent="createTodo">
+      <input data-test="new-todo" v-model="newTodo" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TodoApp',
+
+  data() {
+    return {
+      newTodo: '',
+      todos: [
+        {
+          id: 1,
+          text: 'Learn Vue.js 3',
+          completed: false
+        }
+      ]
+    }
+  },
+
+  methods: {
+    createTodo() {
+      this.todos.push({
+        id: 2,
+        text: this.newTodo,
+        completed: false
+      })
+    }
+  }
+}
+</script>
+```
+
+Мы используем `v-model` для привязки к `<input>` и `@submit` для прослушивания события отправки формы. Когда форма отправлена, `createTodo` вызывается и вставляет новую задачу в `todos` массив.
+
+Пока это выглядит хорошо, запускаем тести и видим ошибку:
+
+```
+expect(received).toHaveLength(expected)
+
+    Expected length: 2
+    Received length: 1
+    Received array:  [{"element": <div data-test="todo">Learn Vue.js 3</div>}]
+```
+
+Количество задач не увеличилось. Проблема в том, что Jest выполняет тесты в синхронном порядке, заканчивая тест, так только последняя функция вызвана. Vue, однако, обновляет DOM асинхронно. Мы должны отметить тест `async`, и вызвать `await` на любом методе, который может привести к изменению DOM. `trigger` один из таких методов, как и `setValue` - мы можем просто добавить `await`, и наш тест будет работать как ожидается:
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('creates a todo', async () => {
+  const wrapper = mount(TodoApp)
+
+  await wrapper.get('[data-test="new-todo"]').setValue('New todo')
+  await wrapper.get('[data-test="form"]').trigger('submit')
+
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+})
+```
+
+Сейчас тест наконец-то пройден!
+
+## Завершить задачу
+
+Теперь, когда мы можем добавлять задачи, давайте добавим возможность пользователю отметить задачу как выполненную/невыполненную при помощи checkbox. Как ранее, давайте начнем с теста, который не выполниться:
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('completes a todo', async () => {
+  const wrapper = mount(TodoApp)
+
+  await wrapper.get('[data-test="todo-checkbox"]').setValue(true)
+
+  expect(wrapper.get('[data-test="todo"]').classes()).toContain('completed')
+})
+```
+
+Этот тест похож на предыдущие два; мы находим элемент и взаимодействуем с ним тем же способом (мы используем `setValue` снова, поскольку взаимодействуем с `<input>`).
+
+Наконец, мы создаем проверку. Мы добавляем `completed` класс к завершенным задачам - далее мы можем использовать его, чтобы добавить стили для визуального указания статуса задачи.
+
+Мы можем завершить этот тест, обновив `<template>`, включив в него `<input type="checkbox">` и привязанный класс к элементу задачи:
+
+```vue
+<template>
+  <div>
+    <div
+      v-for="todo in todos"
+      :key="todo.id"
+      data-test="todo"
+      :class="[todo.completed ? 'completed' : '']"
+    >
+      {{ todo.text }}
+      <input
+        type="checkbox"
+        v-model="todo.completed"
+        data-test="todo-checkbox"
+      />
+    </div>
+
+    <form data-test="form" @submit.prevent="createTodo">
+      <input data-test="new-todo" v-model="newTodo" />
+    </form>
+  </div>
+</template>
+```
+
+Поздравляю! Ты написал свои первые тесты для компонентов.
+
+## Подготовка, действие, проверка
+
+Вы возможно удивлены некоторыми новыми строчками между кодом в каждом из тестов. Давайте взглянем на второй тест снова, в деталях:
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('creates a todo', async () => {
+  const wrapper = mount(TodoApp)
+
+  await wrapper.get('[data-test="new-todo"]').setValue('New todo')
+  await wrapper.get('[data-test="form"]').trigger('submit')
+
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+})
+```
+Тест делиться на 3 разных этапа, разделенных пустой строкой. Три этапа представляют собой три фазы теста: **подготовка**, **действие** и **проверка**.
+
+На этапе _подготовки_, мы устанавливаем сценарий для теста. Более сложные примеры могут потребовать создание Vuex хранилища или заполнить базы данных.
+
+На этапе _действия_, мы выполняем сценарий, имитирующий как бы пользователь мог взаимодействовать с компонентом или приложением.
+
+На этапе _проверки_, мы создаем проверку о том, какое должно быть текущее состояние компонента.
+
+Почти все тесты попадают под эти три фазы. Вам не обязательно разделять их, как это сделано в руководстве, но хорошо, если вы будете держать эти три фазы у себя в голове, когда вы пишите ваши тесты.
+
+## Заключение
+
+- Используйте `mount()` для отображения компонента.
+- Используйте `get()` и `findAll()` для получения DOM элементов.
+- `trigger()` и `setValue()` - помошники для имитации пользовательского ввода.
+- Изменение DOM это асинхронная операция, поэтому убедитесь, что используете `async` и `await`.
+- Тестирование обычно состоит из трех фаз: подготовка, действие, проверка.
diff --git a/docs/ru/guide/essentials/conditional-rendering.md b/docs/ru/guide/essentials/conditional-rendering.md
new file mode 100644
index 000000000..3fd8e6b5a
--- /dev/null
+++ b/docs/ru/guide/essentials/conditional-rendering.md
@@ -0,0 +1,148 @@
+# Условная отрисовка
+
+Vue Test Utils имеет ряд возможностей для отрисовки и проверки состояния компонента с целью подтверждения корректного поведения. В этой статье рассматривается, как отрисовать компоненты, а также проверка верной отрисовки контента.
+
+Эта статья также доступна как [короткое видео](https://www.youtube.com/watch?v=T3CHtGgEFTs&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA&index=15).
+
+## Поиск элементов
+
+Одна из самых базовых возможностей Vue - это возможность динамически вставлять и удалять элементы с помощью `v-if`. Давайте посмотрим, как тестировать компонент, который использует `v-if`.
+
+```js
+const Nav = {
+  template: `
+    <nav>
+      <a id="profile" href="/profile">My Profile</a>
+      <a v-if="admin" id="admin" href="/admin">Admin</a>
+    </nav>
+  `,
+  data() {
+    return {
+      admin: false
+    }
+  }
+}
+```
+
+В `<Nav>` компоненте отображена ссылка на профиль пользователя. В дополнении, если значение `admin` будет `true`, мы указываем ссылку на раздел администратора. Существует три сценария, которые мы должны проверить:
+
+1. `/profile` ссылка должна отобразиться.
+2. Когда пользователь является администратором, `/admin` ссылка должна отобразиться.
+3. Когда пользователь не является администратором, `/admin` ссылка не должна отобразиться.
+
+## Использование `get()`
+
+`wrapper`содержит `get()` метод, который ищет существующие элементы. Он использует [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) синтаксис.
+
+Мы можем проверить содержимое ссылки профиля, используя `get()`:
+
+```js
+test('renders a profile link', () => {
+  const wrapper = mount(Nav)
+
+  // Здесь мы неявно предполагаем, что 
+  // элемент #profile существует.
+  const profileLink = wrapper.get('#profile')
+
+  expect(profileLink.text()).toEqual('My Profile')
+})
+```
+
+Если `get()` не вернет элемент, который совпадает по селектору, он вызовет ошибку, и твои тесты не пройдут. `get()` вернет `DOMWrapper`, если элемент найден. `DOMWrapper` - это небольшая обертка вокруг DOM элемента, который реализует [Wrapper API](/api/#Wrapper-methods) - вот почему мы можем сделать `profileLink.text()` и получить текст. Ты можешь получить исходный элемент, используя `element` свойство.
+
+Есть другой тип обертки - `VueWrapper` - который возвращает [`getComponent`](/api/#getComponent), работающий таким же образом.
+
+## Использование `find()` и `exists()`
+
+`get()` работает на предположении, что элементы существуют и выбросит ошибку, если их нет. Этот метод _не_ рекомендуется использовать для проверки существования элемента.
+
+Чтобы так сделать, мы используем `find()` и `exists()`. Следующий тест проверяет, что если `admin` равен `false` (по умолчанию), ссылка администратора не отображается:
+
+```js
+test('does not render an admin link', () => {
+  const wrapper = mount(Nav)
+
+  // Использование `wrapper.get` может выбросить ошибку и тест не будет пройден.
+  expect(wrapper.find('#admin').exists()).toBe(false)
+})
+```
+
+Обратите внимание, мы вызываем `exists()` на значении, вернувшегося от `.find()`. `find()` похож на `mount()`, также возвращает `wrapper`. `mount()` имеет несколько дополнительных методов, потому что он оборачивает Vue компонент, и `find()` только возвращает обычный DOM элемент, но многие методы общие для них. Некоторые другие методы включая `classes()`, который получает список классов DOM элемента, и `trigger()` для имитации действий пользователя. Ты можешь найти список доступных методов [здесь](/api/#Wrapper-methods).
+
+## Использование `data`
+
+Последний тест - это проверить, что ссылка на администратора отображается, когда `admin` равен `true`. Значение `false` по умолчанию, но мы можем переопределить, используя второй аргумент в `mount()`, [`mounting options`](/api/#mount).
+
+Для `data`, мы можем использовать опцию с подходящим названием `data`:
+
+```js
+test('renders an admin link', () => {
+  const wrapper = mount(Nav, {
+    data() {
+      return {
+        admin: true
+      }
+    }
+  })
+
+  // И снова, при использовании `get()` мы неявно предполагаем, что
+  // элемент существует.
+  expect(wrapper.get('#admin').text()).toEqual('Admin')
+})
+```
+
+Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` в `mount` будет всегда выше по приоритету, чем другие стандартные значения.
+
+Чтобы изучить какие другие опции существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
+
+## Проверка видимости элемента
+
+Иногда вы хотите только скрыть/показать элемент, но сохраняя его в DOM. Vue предлагает `v-show` для сценариев как этот. (Ты можешь проверить отличия между `v-if` и `v-show` [здесь](https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show)).
+
+Это как компонент с `v-show` может выглядеть:
+
+```js
+const Nav = {
+  template: `
+    <nav>
+      <a id="user" href="/profile">My Profile</a>
+      <ul v-show="shouldShowDropdown" id="user-dropdown">
+        <!-- dropdown content -->
+      </ul>
+    </nav>
+  `,
+  data() {
+    return {
+      shouldShowDropdown: false
+    }
+  }
+}
+```
+В этом сценарии элемент невидим, но всегда отрисован. `get()` или `find()` всегда вернут `Wrapper` – `find()` с `.exists()` всегда вернет `true`, потому что **элемент все еще находится в DOM**.
+
+## Использование `isVisible()`
+
+`isVisible()` дает возможность проверить скрытые элементы. В частности, `isVisible()` проверит, если:
+
+- элемент или его предки имеют `display: none`, `visibility: hidden`, `opacity :0` стили
+- элемент или его предки расположены внутри свернутого `<details>` тега
+- элемент или его предки имеют `hidden` атрибут
+
+Для этих случаев, `isVisible()` вернет `false`.
+
+Сценарий тестирования, используя `v-show`, может выглядеть так:
+
+```js
+test('does not show the user dropdown', () => {
+  const wrapper = mount(Nav)
+
+  expect(wrapper.get('#user-dropdown').isVisible()).toBe(false)
+})
+```
+
+## Заключение
+
+- Используйте `find()` вместе с `exists()`, чтобы убедиться в наличии элемента в DOM.
+- Используйте `get()` если ты ожидаешь, что элемент точно будет в DOM.
+- `data` опция в `mount` может быть использована для установки значений по умолчанию для компонента.
+- Используйте `get()` с `isVisible()`, чтобы убедиться в видимости элемента, находящегося в DOM
diff --git a/docs/ru/guide/essentials/event-handling.md b/docs/ru/guide/essentials/event-handling.md
new file mode 100644
index 000000000..23bbaf579
--- /dev/null
+++ b/docs/ru/guide/essentials/event-handling.md
@@ -0,0 +1,156 @@
+# Обработка события
+
+Vue компоненты взаимодействуют друг с другом через пропсы и с помощью генерации событий, используя `$emit`. В этом руководстве, мы посмотрим, как проверить, что события корректно генерируются, используя `emitted()` функцию.
+
+Эта статья также доступна как [короткое видео](https://www.youtube.com/watch?v=U_j-nDur4oU&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA&index=14).
+
+## Счетчик компонент
+
+Здесь простой `<Counter>` компонент. В нем есть кнопка, которая, когда нажата, увеличивает внутреннюю count переменную и генерирует его значение:
+
+```js
+const Counter = {
+  template: '<button @click="handleClick">Increment</button>',
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {  
+    handleClick() {
+      this.count += 1
+      this.$emit('increment', this.count)
+    }
+  }
+}
+```
+Для полного тестирования компонента нам нужно проверить, что `increment` событие было сгенерировано с последним `count` значением.
+
+## Проверка сгенерированных событий
+
+Для этого мы будем полагаться на `emitted()` метод. Он **вернет объект со всеми событиями, которые были сгенерированы компонентом**, и их аргументами в массиве. Давайте посмотрим, как это работает:
+
+```js
+test('emits an event when clicked', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  wrapper.find('button').trigger('click')
+
+  expect(wrapper.emitted()).toHaveProperty('increment')
+})
+```
+
+> Если ты еще не видел `trigger()` до этого, не беспокойся. Он используется для имитации действий пользователя. Ты можешь узнать больше в [Формы](/guide/essentials/forms).
+
+Обратите внимание, что `emitted()` возвращает объект, где каждый ключ совпадает с генерированным событием. В данном случае, `increment`.
+
+Этот тест должен пройти успешно. Мы должны быть уверены, что мы сгенерировали событие с соответствующим названием.
+
+## Проверка аргументов события
+
+Это хорошо, но мы можем сделать лучше! Нам нужно проверить, что мы генерируем верные аргументы, когда вызываем `this.$emit('increment', this.count)`.
+
+Наш следующий шаг - это проверить, что событие содержит `count` значение. Мы сделаем так, с помощью передачи аргументов в `emitted()`.
+
+```js {9}
+test('emits an event with count when clicked', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  wrapper.find('button').trigger('click')
+
+  // `emitted()` принимает аргумент. Он вернет массив 
+  // со всеми вхождениями для `this.$emit('increment')`.
+  const incrementEvent = wrapper.emitted('increment')
+
+  // Мы вызвали "clicked" дважды, поэтому массив `increment` должен
+  // иметь два значения.
+  expect(incrementEvent).toHaveLength(2)
+
+  // Проверить результат первого клика.
+  // Убедиться, что значение в массиве.
+  expect(incrementEvent[0]).toEqual([1])
+
+  // После результат второго клика.
+  expect(incrementEvent[1]).toEqual([2])
+})
+```
+
+Давайте подведем итог и рассмотрим вернувшиеся значения от `emitted()`. Каждое из этих ключей содержит различные значения, сгенерированных во время теста:
+
+```js
+// console.log(wrapper.emitted('increment'))
+;[
+  [1], // при первом вызове значение `count` равно 1
+  [2] // при втором вызове значение `count` равно 2
+]
+```
+
+## Проверка сложных событий
+
+Представьте, что сейчас нашему `<Counter>` компоненту нужно сгенерировать событие с объектом, с указанием дополнительной информации. Например, нам нужно сказать, чтобы любой родительский компонент прослушивал `@increment` событие, является ли `count` четным или нечетным:
+
+```js {12-15}
+const Counter = {
+  template: `<button @click="handleClick">Increment</button>`,
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.count += 1
+
+      this.$emit('increment', {
+        count: this.count,
+        isEven: this.count % 2 === 0
+      })
+    }
+  }
+}
+```
+
+Как делали раньше, нам нужно инициировать `click` событие на `<button>` элементе. После, мы используем `emitted('increment')`, чтобы убедиться в правильных сгенерированных значениях.
+
+```js
+test('emits an event with count when clicked', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  wrapper.find('button').trigger('click')
+
+  // Мы инициировали "clicked" дважды, поэтому массив `increment` должен
+  // иметь два значения.
+  expect(wrapper.emitted('increment')).toHaveLength(2)
+
+  // После, мы должны убедиться, что каждый элемент из `wrapper.emitted('increment')`
+  // содержит массив с ожидаемым объектом.
+  expect(wrapper.emitted('increment')[0]).toEqual([
+    {
+      count: 1,
+      isEven: false
+    }
+  ])
+
+  expect(wrapper.emitted('increment')[1]).toEqual([
+    {
+      count: 2,
+      isEven: true
+    }
+  ])
+})
+```
+
+Тестирование сложных аргументов событий, таких как объекты, никак не отличается от тестирования простых значений, таких как числа или строки.
+
+## Composition API
+
+Если вы используете Composition API, вы вызовите `context.emit()` вместо `this.$emit()`. `emitted()` фиксирует события в обоих случаях, поэтому ты можешь тестировать компоненты, используя такой же алгоритм, описанный здесь.
+
+## Заключение
+
+- Используйте `emitted()` для получения доступа к событиям, сгенерированным Vue компонентом.
+- `emitted(eventName)` возвращает массив, где каждый элемент представляет собой одно сгенерированное событие.
+- Аргументы хранятся в `emitted(eventName)[index]` в массиве, в том же порядке, в каком они были сгенерированы.
diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
new file mode 100644
index 000000000..15d566b28
--- /dev/null
+++ b/docs/ru/guide/index.md
@@ -0,0 +1,59 @@
+# Приступая к изучению
+
+Добро пожаловать в Vue Test Utils, официальную библиотеку инструментов тестирования для Vue.js!
+
+Эта документация для Vue Test Utils v2, которая предназначена для Vue 3.
+
+Коротко:
+
+- [Vue Test Utils 1](https://github.com/vuejs/vue-test-utils/) предназначена для [Vue 2](https://github.com/vuejs/vue/).
+- [Vue Test Utils 2](https://github.com/vuejs/test-utils/) предназначена для [Vue 3](https://github.com/vuejs/core/).
+
+## Что такое Vue Test Utils?
+
+Vue Test Utils (VTU) это набор вспомогательных функций, предназначенных для упрощения тестирование Vue.js компонентов. Библиотека предоставляет некоторые методы для добавления и взаимодействия с Vue компонентами в изоляции от других компонентов.
+
+Давайте рассмотрим пример:
+
+```js
+import { mount } from '@vue/test-utils'
+
+// Компонент для тестирования
+const MessageComponent = {
+  template: '<p>{{ msg }}</p>',
+  props: ['msg']
+}
+
+test('displays message', () => {
+  const wrapper = mount(MessageComponent, {
+    props: {
+      msg: 'Hello world'
+    }
+  })
+
+  // Сравнить текст компонента и ожидаемый текст.
+  expect(wrapper.text()).toContain('Hello world')
+})
+```
+
+Vue Test Utils обычно используется с программами тестирования. Популярные программы тестирования:
+
+- [Vitest](https://vitest.dev/). На основе терминала, имеет экспериментальный браузерный интерфейс.
+- [Cypress](https://cypress.io/). На основе браузера, поддерживает Vite, Webpack.
+- [Playwright](https://playwright.dev/docs/test-components) (экспериментальный). На основе браузера, поддерживает Vite.
+- [WebdriverIO](https://webdriver.io/docs/component-testing/vue). На основе браузера, поддерживает Vite, Webpack, кросс-браузерную поддержку.
+
+Vue Test Utils это небольшая библиотека. Для создания чего-то более функционального, вы можете рассмотреть [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/overview) которая имеет hot reload (быстрая перезагрузка), или [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/) which emphasizes accessibility based selectors when making assertions. Оба инструмента используется Vue Test Utils под капотом и предоставляют те же самые API.
+
+## Что дальше? 
+
+Чтобы увидеть Vue Test Utils в действии, [попробовать ускоренный курс](../guide/essentials/a-crash-course.md), где мы создали простое Todo приложение, используя подход "сначала тест, потом реализация".
+
+Документация разделена на 2 главных раздела:
+
+- **Основы**, покрывает основные случаи использования, с которыми вы столкнетесь, при тестировании Vue компонентов.
+- **Углубленно**, исследует продвинутые возможности библиотеки.
+
+Вы также можете изучить полную [API](/api/).
+
+В качестве альтернативы, если вы предпочитаете изучать по видео, тут есть [плейлист с лекциями](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA).
diff --git a/docs/ru/index.md b/docs/ru/index.md
new file mode 100644
index 000000000..dbf9b0c18
--- /dev/null
+++ b/docs/ru/index.md
@@ -0,0 +1,17 @@
+---
+layout: home
+
+title: Vue Test Utils
+titleTemplate: Vue Test Utils для Vue.js 3
+
+hero:
+  name: Vue Test Utils
+  text: Инструменты тестирования для Vue.js 3
+  tagline: Официальный набор инструментов тестирования для Vue.js 3
+  image:
+    src: /logo.svg
+    alt: Vue Test Utils
+  actions:
+    - theme: brand
+      text: Начать знакомство →
+      link: /ru/guide/
diff --git a/docs/ru/installation/index.md b/docs/ru/installation/index.md
new file mode 100644
index 000000000..addf7409b
--- /dev/null
+++ b/docs/ru/installation/index.md
@@ -0,0 +1,18 @@
+# Установка
+
+```bash
+npm install --save-dev @vue/test-utils
+
+# либо
+yarn add --dev @vue/test-utils
+```
+
+Vue Test Utils является гибким фреймворком - вы можете использовать его с какой-угодно программой тестирования. Самой простой вариант это использовать [Jest](https://jestjs.io/), популярная программа тестирования.
+
+Чтобы подключить `.vue` файлы в Jest, тебе нужен `vue-jest`. `vue-jest` v5 поддерживает Vue 3. Он все еще в альфа версии, как и остальная экосистема Vue.js 3, поэтому если вы найдете недочеты, пожалуйста сообщите об этом [здесь](https://github.com/vuejs/vue-jest/) и укажите, что вы используете `vue-jest` v5.
+
+Вы можете установить в виде `vue-jest@next`. После вам нужно настроить его при помощи Jest [transform](https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object) опции.
+
+Если ты не хочешь настраивать самостоятельно, ты можешь взять за основу этот заранее настроенный проект [здесь](https://github.com/lmiller1990/vtu-next-demo).
+
+Продолжайте чтение, чтобы узнать больше о Vue Test Utils.

From b14960dd5f6df34540cfe2e40037f60bf0503b8b Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Sun, 22 Dec 2024 13:18:57 +0300
Subject: [PATCH 02/38] docs(ru): add `forms` page, check spelling

---
 docs/.vitepress/config/ru.mts              |   2 +-
 docs/ru/guide/essentials/a-crash-course.md |   6 +-
 docs/ru/guide/essentials/event-handling.md |   6 +-
 docs/ru/guide/essentials/forms.md          | 409 +++++++++++++++++++++
 4 files changed, 416 insertions(+), 7 deletions(-)
 create mode 100644 docs/ru/guide/essentials/forms.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index e0624c9af..ecb94c9a2 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -54,7 +54,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: 'Тестирование генерации событий',
               link: '/ru/guide/essentials/event-handling'
             },
-            { text: 'Testing Forms', link: '/guide/essentials/forms' },
+            { text: 'Тестирование форм', link: '/ru/guide/essentials/forms' },
             {
               text: 'Passing Data to Components',
               link: '/guide/essentials/passing-data'
diff --git a/docs/ru/guide/essentials/a-crash-course.md b/docs/ru/guide/essentials/a-crash-course.md
index 460518897..5165ef089 100644
--- a/docs/ru/guide/essentials/a-crash-course.md
+++ b/docs/ru/guide/essentials/a-crash-course.md
@@ -5,7 +5,7 @@
 - Добавлять компоненты
 - Находить элементы
 - Заполнять формы
-- Вызывать события
+- Вызвать события
 
 ## Приступая к изучению
 
@@ -78,7 +78,7 @@ test('renders a todo', () => {
 
 ## Добавление новой задачи
 
-Следующий сценарий, который мы добавим для пользователя, будет создание новой задачи. Чтобы так сделать, нам нужна форма с полями ввода для пользователя, чтобы ввести какой-то текст. Когда пользователь подтвердит отправку формы, мы ожидаем новую отрисованную задачу. Давай взгляним на этот тест:
+Следующий сценарий, который мы добавим для пользователя, будет создание новой задачи. Чтобы так сделать, нам нужна форма с полями ввода для пользователя, чтобы ввести какой-то текст. Когда пользователь подтвердит отправку формы, мы ожидаем новую отрисованную задачу. Давай взглянем на этот тест:
 
 ```js
 import { mount } from '@vue/test-utils'
@@ -256,6 +256,6 @@ test('creates a todo', async () => {
 
 - Используйте `mount()` для отображения компонента.
 - Используйте `get()` и `findAll()` для получения DOM элементов.
-- `trigger()` и `setValue()` - помошники для имитации пользовательского ввода.
+- `trigger()` и `setValue()` - помощники для имитации пользовательского ввода.
 - Изменение DOM это асинхронная операция, поэтому убедитесь, что используете `async` и `await`.
 - Тестирование обычно состоит из трех фаз: подготовка, действие, проверка.
diff --git a/docs/ru/guide/essentials/event-handling.md b/docs/ru/guide/essentials/event-handling.md
index 23bbaf579..939639262 100644
--- a/docs/ru/guide/essentials/event-handling.md
+++ b/docs/ru/guide/essentials/event-handling.md
@@ -41,7 +41,7 @@ test('emits an event when clicked', () => {
 })
 ```
 
-> Если ты еще не видел `trigger()` до этого, не беспокойся. Он используется для имитации действий пользователя. Ты можешь узнать больше в [Формы](/guide/essentials/forms).
+> Если ты еще не видел `trigger()` до этого, не беспокойся. Он используется для имитации действий пользователя. Ты можешь узнать больше в [Формы](/ru/guide/essentials/forms).
 
 Обратите внимание, что `emitted()` возвращает объект, где каждый ключ совпадает с генерированным событием. В данном случае, `increment`.
 
@@ -112,7 +112,7 @@ const Counter = {
 }
 ```
 
-Как делали раньше, нам нужно инициировать `click` событие на `<button>` элементе. После, мы используем `emitted('increment')`, чтобы убедиться в правильных сгенерированных значениях.
+Как делали раньше, нам нужно вызвать `click` событие на `<button>` элементе. После, мы используем `emitted('increment')`, чтобы убедиться в правильных сгенерированных значениях.
 
 ```js
 test('emits an event with count when clicked', () => {
@@ -121,7 +121,7 @@ test('emits an event with count when clicked', () => {
   wrapper.find('button').trigger('click')
   wrapper.find('button').trigger('click')
 
-  // Мы инициировали "clicked" дважды, поэтому массив `increment` должен
+  // Мы вызвали "clicked" дважды, поэтому массив `increment` должен
   // иметь два значения.
   expect(wrapper.emitted('increment')).toHaveLength(2)
 
diff --git a/docs/ru/guide/essentials/forms.md b/docs/ru/guide/essentials/forms.md
new file mode 100644
index 000000000..3cb0d7afc
--- /dev/null
+++ b/docs/ru/guide/essentials/forms.md
@@ -0,0 +1,409 @@
+# Обработка форм
+
+Формы в Vue могут быть простыми, начиная с простых HTML форм, заканчивая сложными вложенными деревьями пользовательских Vue компонентов.
+Мы постепенно пойдем через взаимодействие с элементами формы, устанавливая значения и вызывая события.
+
+Чаще всего мы будет использовать методы `setValue()` и `trigger()`.
+
+## Взаимодействие с элементами формы
+
+Давайте взглянем на самую простую форму:
+
+```vue
+<template>
+  <div>
+    <input type="email" v-model="email" />
+
+    <button @click="submit">Submit</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      email: ''
+    }
+  },
+  methods: {
+    submit() {
+      this.$emit('submit', this.email)
+    }
+  }
+}
+</script>
+```
+
+### Установка значений элементов
+
+Самый простой путь привязать поле ввода к данным в Vue - это использование `v-model`. Как ты, возможно, знаешь сейчас, он позволяет генерировать события для каждого элемента формы и принимать props, что значительно упрощает взаимодействие с элементами формы.
+
+Чтобы изменить значение поля ввода в VTU, вы можете использовать `setValue()` метод. Он принимает параметр, чаще всего `String` или `Boolean`, и возвращает `Promise`, который выполнится после того, как Vue обновит DOM.
+
+```js
+test('sets the value', async () => {
+  const wrapper = mount(Component)
+  const input = wrapper.find('input')
+
+  await input.setValue('my@mail.com')
+
+  expect(input.element.value).toBe('my@mail.com')
+})
+```
+
+Как ты можешь видеть, `setValue` устанавливает `value` свойство на поле ввода элемента.
+
+Мы используем `await`, чтобы убедиться, что Vue обновился и изменения были отражены в DOM, до того как мы сделаем какие-либо проверки.
+
+### Вызов событий
+
+Вызов событий - это второе самое важное действие, при работе с формами и элементами действия. Давайте посмотрим на наш `button`, из предыдущего примера.
+
+```html
+<button @click="submit">Submit</button>
+```
+
+Для вызова события click, нам нужно использовать `trigger` метод.
+
+```js
+test('trigger', async () => {
+  const wrapper = mount(Component)
+
+  // вызвать событие
+  await wrapper.find('button').trigger('click')
+
+  // проверить некоторое выполненное действие, например, сгенерированное событие.
+  expect(wrapper.emitted()).toHaveProperty('submit')
+})
+```
+
+> Если ты не знаком с `emitted()`, не волнуйтесь. Он используется для проверки сгенерированных событий компонента. Ты можешь изучить больше в [Обработка событий](/ru/guide/essentials/event-handling).
+
+Мы вызываем слушатель события `click`, так что компонент выполнит `submit` метод. Как мы делали с `setValue`, мы используем `await`, чтобы убедиться, что действие отображается при помощи Vue.
+
+После мы можем проверить, что некоторые события произошли. В данном случае, что мы сгенерировали нужное событие.
+
+Давайте объединим эти два метода, чтобы проверить, что наша простая форма генерирует то, что ввел пользователь.
+
+```js
+test('emits the input to its parent', async () => {
+  const wrapper = mount(Component)
+
+  // установить значение
+  await wrapper.find('input').setValue('my@mail.com')
+
+  // вызывать событие
+  await wrapper.find('button').trigger('click')
+
+  // проверить, что `submit` событие сгенерировано,
+  expect(wrapper.emitted('submit')[0][0]).toBe('my@mail.com')
+})
+```
+
+## Продвинутый workflows
+
+Теперь, когда мы знаем основы, давайте углубимся в более сложные примеры.
+
+### Работа с различными элементами формы
+
+Мы увидели, как `setValue` работает с полями ввода, но он гораздо более универсальный, потому что он может установить значения на различные типы полей ввода.
+
+Давайте посмотрим на более сложную форму, которая имеет больше типов полей ввода.
+
+```vue
+<template>
+  <form @submit.prevent="submit">
+    <input type="email" v-model="form.email" />
+
+    <textarea v-model="form.description" />
+
+    <select v-model="form.city">
+      <option value="new-york">New York</option>
+      <option value="moscow">Moscow</option>
+    </select>
+
+    <input type="checkbox" v-model="form.subscribe" />
+
+    <input type="radio" value="weekly" v-model="form.interval" />
+    <input type="radio" value="monthly" v-model="form.interval" />
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        email: '',
+        description: '',
+        city: '',
+        subscribe: false,
+        interval: ''
+      }
+    }
+  },
+  methods: {
+    async submit() {
+      this.$emit('submit', this.form)
+    }
+  }
+}
+</script>
+```
+
+Наш расширенный Vue компонент немного длиннее, имеет несколько больше типов полей ввода, и сейчас `submit` обработчик перенесен в `<form/>` элемент.
+
+Точно так же, как мы устанавливаем значение на `input`, мы можем установить его на все остальные поля ввода формы.
+
+```js
+import { mount } from '@vue/test-utils'
+import FormComponent from './FormComponent.vue'
+
+test('submits a form', async () => {
+  const wrapper = mount(FormComponent)
+
+  await wrapper.find('input[type=email]').setValue('name@mail.com')
+  await wrapper.find('textarea').setValue('Lorem ipsum dolor sit amet')
+  await wrapper.find('select').setValue('moscow')
+  await wrapper.find('input[type=checkbox]').setValue()
+  await wrapper.find('input[type=radio][value=monthly]').setValue()
+})
+```
+
+Как ты можешь видеть, `setValue` - очень универсальный метод. Он может работать с любыми типами полей ввода.
+
+Мы используем `await` везде, чтобы убедиться в том, что каждое изменение было применено до того, как мы вызываем следующее событие. Это рекомендованное действие, чтобы быть уверенным, что вы начнете проверки, когда DOM обновится.
+
+::: tip
+Если ты не передашь параметр `setValue` для `OPTION`, `CHECKBOX` или `RADIO` полей ввода, тогда будет установлено `checked`.
+:::
+
+Мы задали значения в нашей форме, сейчас самое время отправить форму и написать несколько проверок.
+
+### Вызов сложных слушателей событий
+
+Слушатели событий не всегда простые `click` события. Vue позволяет вам прослушивать все виды DOM событий, добавляя специальные модификаторы, например, `.prevent` и другие. Давайте посмотрим, как мы можем протестировать их.
+
+В нашей форме выше мы перенесли событие из `button` в `form` элемент. Это хорошая практика, которой нужно придерживаться, поскольку это позволит отправить форму нажатием `enter` клавиши, которая является более нативным подходом.
+
+Для вызова `submit` обработчика мы используем `trigger` метод снова.
+
+```js {14,16-22}
+test('submits the form', async () => {
+  const wrapper = mount(FormComponent)
+
+  const email = 'name@mail.com'
+  const description = 'Lorem ipsum dolor sit amet'
+  const city = 'moscow'
+
+  await wrapper.find('input[type=email]').setValue(email)
+  await wrapper.find('textarea').setValue(description)
+  await wrapper.find('select').setValue(city)
+  await wrapper.find('input[type=checkbox]').setValue()
+  await wrapper.find('input[type=radio][value=monthly]').setValue()
+
+  await wrapper.find('form').trigger('submit.prevent')
+
+  expect(wrapper.emitted('submit')[0][0]).toStrictEqual({
+    email,
+    description,
+    city,
+    subscribe: true,
+    interval: 'monthly'
+  })
+})
+```
+
+Для тестирования модификатора события мы напрямую копируем нашу строку с событием `submit.prevent` в `trigger`. `trigger` может прочитать переданное событие и выборочно применить то, что необходимо.
+
+::: tip
+Нативные модификаторы событий `.prevent` и `.stop` являются Vue-специфическими, и поэтому нам не нужно тестировать их, Vue самостоятельно уже сделал это.
+:::
+
+После мы сделаем простую проверку, генерирует ли форма верное событие и его параметры.
+
+#### Нативная отправка формы
+
+Вызов `submit` события на `<form>` элементе имитирует поведение браузера во время отправки формы. Если мы хотим вызвать отправку формы более нативно, мы могли бы вместо этого вызвать `click` событие на кнопке отправки. Поскольку элементы формы, не связанные с `document`, не могут быть отправлены, в соответствии с [HTML спецификацией](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm), нам нужно использовать [`attachTo`](/api/#attachTo), чтобы привязать элементы.
+
+#### Несколько модификаторов на одном событии
+
+Давайте предположим, у вас имеется очень детализированная и сложная форма, со специальными обработчиками взаимодействия. Как мы можем протестировать это?
+
+```html
+<input @keydown.meta.c.exact.prevent="captureCopy" v-model="input" />
+```
+
+Предположим, у нас поле ввода, которое обрабатывается, когда пользователь нажимает на `cmd` + `c`, и мы хотим перехватить и отменить копирование. Такое тестирование такое легкое, как и скопировать событие из компонента в `trigger()` метод.
+
+```js
+test('handles complex events', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find(input).trigger('keydown.meta.c.exact.prevent')
+
+  // запустить ваши проверки
+})
+```
+ 
+Vue Test Utils считывает событие и применяет соответствующие свойства к объекту события. В данном случае это будет соответствовать чему-то такому:
+
+```js
+{
+  // ... другие свойства
+  "key": "c",
+  "metaKey": true
+}
+```
+
+#### Добавление дополнительных данных к событию
+
+Допустим, вашему коду нужно что-то из `event` объекта. Вы можете протестировать такие сценарии, передав дополнительные данные как второй параметр.
+
+```vue
+<template>
+  <form>
+    <input type="text" v-model="value" @blur="handleBlur" />
+    <button>Submit</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    handleBlur(event) {
+      if (event.relatedTarget.tagName === 'BUTTON') {
+        this.$emit('focus-lost')
+      }
+    }
+  }
+}
+</script>
+```
+
+```js
+import Form from './Form.vue'
+
+test('emits an event only if you lose focus to a button', () => {
+  const wrapper = mount(Form)
+
+  const componentToGetFocus = wrapper.find('button')
+
+  wrapper.find('input').trigger('blur', {
+    relatedTarget: componentToGetFocus.element
+  })
+
+  expect(wrapper.emitted('focus-lost')).toBeTruthy()
+})
+```
+
+Здесь мы предполагаем, что наш код проверяет внутри `event` объекта, является ли `relatedTarget` кнопкой или нет. Мы можем просто передать ссылку на такой элемент, имитируя, что случилось бы, если пользователь нажал на `button` после ввода текста в `input`.
+
+## Взаимодействие с Vue компонентом в качестве поля ввода
+
+Поля ввода - это не только простые элементы. Мы часто используем Vue компоненты, которые ведут себя как поля ввода. Они могут добавлять разметку, стили и множество функциональных возможностей.
+
+Тестирование форм, которые используют такие поля ввода, могут показаться сначала сложными, но, следуя нескольким простым правилам, это быстро станет понятным.
+
+Далее идет компонент, который оборачивает `label` и `input` элемент:
+
+```vue
+<template>
+  <label>
+    {{ label }}
+    <input
+      type="text"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'CustomInput',
+
+  props: ['modelValue', 'label']
+}
+</script>
+```
+
+Этот Vue компонент также обратно генерирует все, что ты напечатаешь. Чтобы так сделать, вам нужно:
+
+```html
+<custom-input v-model="input" label="Text Input" class="text-input" />
+```
+
+Как сказано выше, большинство из этих полей ввода на базе Vue имеют внутри реальные `button` или `input`. Ты можешь также просто найти этот элемент и взаимодействовать с ним:
+
+```js
+test('fills in the form', async () => {
+  const wrapper = mount(CustomInput)
+
+  await wrapper.find('.text-input input').setValue('text')
+
+  // продолжайте свои проверки или взаимодействия
+})
+```
+
+### Тестирование сложных Input компонентов
+
+Что случится, если твой Input компонент не будет простым?. Вы, возможно, будете использовать UI-библиотеку, например Vuetify. Если вы полагаетесь на поиск внутри разметки, чтобы найти нужные элементы, твои тесты могут не пройти, если внешняя библиотека решит изменить их внутренности.
+
+В таких случаях, вы можете установить значение напрямую, используя экземпляр компонента и `setValue`.
+
+Предположим, у нас есть форма, которая использует Vuetify textarea:
+
+```vue
+<template>
+  <form @submit.prevent="handleSubmit">
+    <v-textarea v-model="description" ref="description" />
+    <button type="submit">Send</button>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'CustomTextarea',
+  data() {
+    return {
+      description: ''
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$emit('submitted', this.description)
+    }
+  }
+}
+</script>
+```
+
+Мы можем использовать `findComponent`, чтобы найти экземпляр компонента, и далее установить его значение.
+
+```js
+test('emits textarea value on submit', async () => {
+  const wrapper = mount(CustomTextarea)
+  const description = 'Some very long text...'
+
+  await wrapper.findComponent({ ref: 'description' }).setValue(description)
+
+  wrapper.find('form').trigger('submit')
+
+  expect(wrapper.emitted('submitted')[0][0]).toEqual(description)
+})
+```
+
+## Заключение
+
+- Используйте `setValue` для установки значения как на полях ввода, так и Vue компонентов.
+- Используйте `trigger` для вызова DOM событий, с или без модификаторов.
+- Добавьте дополнительные данные о событии в `trigger`, используя второй параметр.
+- Проверьте, что DOM изменился и верные события были сгенерированы. Try not to assert data on the Component instance.

From a4d5562de8022024cd9f6928cdcea8772dc5c9e7 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Mon, 23 Dec 2024 11:25:58 +0300
Subject: [PATCH 03/38] docs(ru): add `passing-data` page

---
 docs/.vitepress/config/ru.mts                 |   4 +-
 .../guide/essentials/conditional-rendering.md |   4 +-
 docs/ru/guide/essentials/event-handling.md    |   2 +-
 docs/ru/guide/essentials/forms.md             |   2 +-
 docs/ru/guide/essentials/passing-data.md      | 133 ++++++++++++++++++
 5 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 docs/ru/guide/essentials/passing-data.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index ecb94c9a2..3974277f9 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -56,8 +56,8 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
             },
             { text: 'Тестирование форм', link: '/ru/guide/essentials/forms' },
             {
-              text: 'Passing Data to Components',
-              link: '/guide/essentials/passing-data'
+              text: 'Передача данных в компоненты',
+              link: '/ru/guide/essentials/passing-data'
             },
             {
               text: 'Write components that are easy to test',
diff --git a/docs/ru/guide/essentials/conditional-rendering.md b/docs/ru/guide/essentials/conditional-rendering.md
index 3fd8e6b5a..6d52ee49d 100644
--- a/docs/ru/guide/essentials/conditional-rendering.md
+++ b/docs/ru/guide/essentials/conditional-rendering.md
@@ -91,9 +91,9 @@ test('renders an admin link', () => {
 })
 ```
 
-Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` в `mount` будет всегда выше по приоритету, чем другие стандартные значения.
+Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` при создании компонента будет всегда выше по приоритету, чем другие стандартные значения.
 
-Чтобы изучить какие другие опции существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
+Чтобы изучить какие другие опции при создании компонента существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
 
 ## Проверка видимости элемента
 
diff --git a/docs/ru/guide/essentials/event-handling.md b/docs/ru/guide/essentials/event-handling.md
index 939639262..e0a230625 100644
--- a/docs/ru/guide/essentials/event-handling.md
+++ b/docs/ru/guide/essentials/event-handling.md
@@ -1,6 +1,6 @@
 # Обработка события
 
-Vue компоненты взаимодействуют друг с другом через пропсы и с помощью генерации событий, используя `$emit`. В этом руководстве, мы посмотрим, как проверить, что события корректно генерируются, используя `emitted()` функцию.
+Vue компоненты взаимодействуют друг с другом через свойства компонента и с помощью генерации событий, используя `$emit`. В этом руководстве, мы посмотрим, как проверить, что события корректно генерируются, используя `emitted()` функцию.
 
 Эта статья также доступна как [короткое видео](https://www.youtube.com/watch?v=U_j-nDur4oU&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA&index=14).
 
diff --git a/docs/ru/guide/essentials/forms.md b/docs/ru/guide/essentials/forms.md
index 3cb0d7afc..d98571fe9 100644
--- a/docs/ru/guide/essentials/forms.md
+++ b/docs/ru/guide/essentials/forms.md
@@ -36,7 +36,7 @@ export default {
 
 ### Установка значений элементов
 
-Самый простой путь привязать поле ввода к данным в Vue - это использование `v-model`. Как ты, возможно, знаешь сейчас, он позволяет генерировать события для каждого элемента формы и принимать props, что значительно упрощает взаимодействие с элементами формы.
+Самый простой путь привязать поле ввода к данным в Vue - это использование `v-model`. Как ты, возможно, знаешь сейчас, он позволяет генерировать события для каждого элемента формы и принимать свойства, что значительно упрощает взаимодействие с элементами формы.
 
 Чтобы изменить значение поля ввода в VTU, вы можете использовать `setValue()` метод. Он принимает параметр, чаще всего `String` или `Boolean`, и возвращает `Promise`, который выполнится после того, как Vue обновит DOM.
 
diff --git a/docs/ru/guide/essentials/passing-data.md b/docs/ru/guide/essentials/passing-data.md
new file mode 100644
index 000000000..942c7f42b
--- /dev/null
+++ b/docs/ru/guide/essentials/passing-data.md
@@ -0,0 +1,133 @@
+# Передача данных в компоненты
+
+Vue Test Utils предоставляет несколько путей для установки данных и свойств у компонента, чтобы позволить тебе полностью протестировать поведение компонента в различных ситуациях.
+
+В этой главе мы исследуем `data` и `props` опции при создании компонента, а также `VueWrapper.setProps()` для динамического обновления свойств компонента.
+
+## Компонент для пароля
+
+Мы продемонстрируем вышеупомянутые возможности, при помощи создания `<Password>` компонента. Этот компонент подтверждает пароль, который удовлетворяет определенным критериями. Мы начнем с следующего и добавим возможности, а также тесты, чтобы убедиться, что функции работают правильно:
+
+```js
+const Password = {
+  template: `
+    <div>
+      <input v-model="password">
+    </div>
+  `,
+  data() {
+    return {
+      password: ''
+    }
+  }
+}
+```
+
+Первое требование, которое мы добавим - это минимальная длина.
+
+## Использование `props` для установки минимальной длины
+
+Мы хотим переиспользовать этот компонент во всех наших проектах, каждый из которых может иметь различные требования. По этой причине мы создадим `minLength` **свойство**, которые мы передадим в компонент `<Password>`:
+
+Мы покажем ошибку, если `password` меньше, чем `minLength`. Мы можем сделать так, создав `error` вычисляемое свойство, и отрисовать по условию его при помощи `v-if`:
+
+```js
+const Password = {
+  template: `
+    <div>
+      <input v-model="password">
+      <div v-if="error">{{ error }}</div>
+    </div>
+  `,
+  props: {
+    minLength: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      password: ''
+    }
+  },
+  computed: {
+    error() {
+      if (this.password.length < this.minLength) {
+        return `Password must be at least ${this.minLength} characters.`
+      }
+      return
+    }
+  }
+}
+```
+
+Чтобы протестировать это, нам нужно установить `minLength`, а также `password`, который меньше, чем это число. Мы можем сделать это используя `data` и `props` опции при создании компонента. И наконец, мы проверим, что сообщение об ошибке отрисовалось:
+
+```js
+test('renders an error if length is too short', () => {
+  const wrapper = mount(Password, {
+    props: {
+      minLength: 10
+    },
+    data() {
+      return {
+        password: 'short'
+      }
+    }
+  })
+
+  expect(wrapper.html()).toContain('Password must be at least 10 characters')
+})
+```
+
+Написать тест для `maxLength` правила остается в качестве упражнения для читателя! Другой способ сделать проверку, могло бы быть использование `setValue` для обновления поля ввода с паролем, который будет короче нужного. Вы можете изучить подробнее в [Формы](/ru/guide/essentials/forms).
+
+## Использование `setProps`
+
+Иногда, вам нужно написать тест для побочного эффекта от изменения свойства. Этот простой `<Show>` компонент отрисовывает приветствие, если `show` свойство является `true`.
+
+```vue
+<template>
+  <div v-if="show">{{ greeting }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      greeting: 'Hello'
+    }
+  }
+}
+</script>
+```
+
+Для полного тестирования нам нужно убедиться, что `greeting` отрисовалось по умолчанию. Мы можем обновить `show` свойство, используя `setProps()`, который заставляет `greeting` скрыться:
+
+```js
+import { mount } from '@vue/test-utils'
+import Show from './Show.vue'
+
+test('renders a greeting when show is true', async () => {
+  const wrapper = mount(Show)
+  expect(wrapper.html()).toContain('Hello')
+
+  await wrapper.setProps({ show: false })
+
+  expect(wrapper.html()).not.toContain('Hello')
+})
+```
+
+Мы также используем ключевое слово `await` при вызове `setProps()`, чтобы убедиться в том, что DOM изменился до того, как тест продолжится.
+
+## Заключение
+
+- Используйте `props` и `data` опции при создании компонента для установки начального состояния компонента.
+- Используйте `setProps()`, чтобы изменить свойство во время теста.
+- Используйте ключевое слово `await` перед `setProps()`, чтобы убедится, что Vue обновил DOM, перед тем продолжением теста.
+- Взаимодействие напрямую с вашим компонентом дает больше возможностей. Рассмотрите `setValue` или `trigger` в комбинации с `data`, чтобы убедиться, что все работает верно.

From dd67cd181477c2b24cb0273792dba2219e989529 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Thu, 26 Dec 2024 10:36:15 +0300
Subject: [PATCH 04/38] add 'easy-to-test' page

---
 docs/.vitepress/config/ru.mts            |   4 +-
 docs/ru/guide/essentials/easy-to-test.md | 125 +++++++++++++++++++++++
 docs/ru/guide/essentials/passing-data.md |   2 +-
 3 files changed, 128 insertions(+), 3 deletions(-)
 create mode 100644 docs/ru/guide/essentials/easy-to-test.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index 3974277f9..b865e2f3b 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -60,8 +60,8 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               link: '/ru/guide/essentials/passing-data'
             },
             {
-              text: 'Write components that are easy to test',
-              link: '/guide/essentials/easy-to-test'
+              text: 'Пишем компоненты для легкого тестирования',
+              link: '/ru/guide/essentials/easy-to-test'
             }
           ]
         },
diff --git a/docs/ru/guide/essentials/easy-to-test.md b/docs/ru/guide/essentials/easy-to-test.md
new file mode 100644
index 000000000..d8fa09325
--- /dev/null
+++ b/docs/ru/guide/essentials/easy-to-test.md
@@ -0,0 +1,125 @@
+# Пишем компоненты для легкого тестирования
+
+Vue Test Utils помогает писать тесты для Vue компонентов. Однако, VTU может сделать не так уж много.
+
+Ниже приведен список рекомендаций для написания кода, который проще тестировать и написать тесты, которые понятны по смыслу и просто поддерживать в будущем.
+
+Список ниже предоставляет общие рекомендации, и он может пригодиться в распространенных сценариях.
+
+## Не тестируйте детали реализации
+
+Думайте о входных и выходных данных с точки зрения пользователя. Грубо говоря, это все что тебе нужно принимать во внимание, чтобы написать тест для Vue компонента:
+
+| **Входные данные**  | Примеры                                                            |
+| ------------------- | ------------------------------------------------------------------ |
+| Взаимодействия      | Нажатие мыши, печать текста... любые "человеческие" взаимодействия |
+| Свойства компонента | Аргументы, которые получает компонент                              |
+| Потоки данных       | Данные, приходящие от API вызовов, подписки на данные…             |
+
+| **Выходные данные** | Примеры                                           |
+| ------------------- | ------------------------------------------------- |
+| DOM элементы        | Любые _наблюдаемые_ узлы, отрисованные в document |
+| События             | Генерация событий (используя `$emit`)             |
+| Побочные эффекты    | Такие как `console.log` или API вызовы            |
+
+**Все остальное - это детали реализации**.
+
+Обратите внимание, что этот список не включает элементы такие, как внутренние методы, промежуточные состояния и даже данные.
+
+Правило говорит о том, что **тест не должен ломаться при рефакторинге**, то есть, когда мы меняем его внутреннюю реализацию без изменения его поведения. Если это произойдет, тест может зависеть на детали реализации.
+
+Например, давайте предположим простой Counter компонент, который содержит кнопку для увеличения счетчика:
+
+```vue
+<template>
+  <p class="paragraph">Times clicked: {{ count }}</p>
+  <button @click="increment">increment</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    increment() {
+      this.count++
+    }
+  }
+}
+</script>
+```
+
+Мы могли бы написать следующий тест:
+
+```js
+import { mount } from '@vue/test-utils'
+import Counter from './Counter.vue'
+
+test('counter text updates', async () => {
+  const wrapper = mount(Counter)
+  const paragraph = wrapper.find('.paragraph')
+
+  expect(paragraph.text()).toBe('Times clicked: 0')
+
+  await wrapper.setData({ count: 2 })
+
+  expect(paragraph.text()).toBe('Times clicked: 2')
+})
+```
+
+Обратите внимание как здесь мы обновляем его внутреннее состояние, мы также полагаемся на детали (с точки зрения пользователя) такие, как CSS классы.
+
+:::tip
+Обратите внимание, что изменение либо состояния или CSS классов могло бы сломать тест. Хотя, компонент мог бы и сработать, как ожидалось. Это называется **ложно положительным результатом**.
+:::
+
+Вместо этого, следующий тест пытается придерживаться концепции входных и выходных данных, описанных выше:
+
+```js
+import { mount } from '@vue/test-utils'
+
+test('text updates on clicking', async () => {
+  const wrapper = mount(Counter)
+
+  expect(wrapper.text()).toContain('Times clicked: 0')
+
+  const button = wrapper.find('button')
+  await button.trigger('click')
+  await button.trigger('click')
+
+  expect(wrapper.text()).toContain('Times clicked: 2')
+})
+```
+
+Библиотека такая как [Vue Testing Library](https://github.com/testing-library/vue-testing-library/) построена на этих принципах. Если ты заинтересован в таком подходе, можете ознакомиться с ним.
+
+## Создавайте более маленькие и простые компоненты
+
+Общее правило в том, что если компонент делает меньше, тогда его можно проще протестировать.
+
+Создание более маленьких компонентов сделает их более компонуемыми и более простыми для понимания. Нижеперечисленный список предложений поможет сделать компоненты проще.
+
+### Извлечение API вызовов
+
+Обычно, ты выполняешь несколько HTTP запросов в вашем приложении. С точки зрения тестирования, HTTP запросы предоставляют входные данные в компоненты, и компоненты могут также отправлять HTTP запросы.
+
+:::tip
+Ознакомьтесь с [Создание HTTP запросов](../advanced/http-requests.md) руководством, если ты не знаком с тестированием API вызовов.
+:::
+
+### Извлечение сложных методов
+
+Иногда компонент может содержать несколько сложных методов, выполняющих сложные вычисления или использующих несколько зависимостей.
+
+Здесь предлагается **извлекать метод и импортировать его в компонент**. Таким образом, ты можешь протестировать метод изолированно, используя Jest или любую другую программу тестирования.
+
+Он имеет дополнительные преимущества с компонентом, который легче для понимания, потому что сложная логика вынесена в другой файл.
+
+А также, если сложный метод непросто настроить или он медленно работает, ты возможно хотел бы имитировать его, чтобы сделать тест более простых и быстрым. [Создание HTTP запросов](/ru/guide/advanced/http-requests.md) - хороший пример с вполне сложной библиотекой axios!
+
+## Пишите тесты перед созданием компонента
+
+Ты не сможешь написать нетестируемый код, если ты напишешь тесты заранее!
+
+Наш [Ускоренный курс](../essentials/a-crash-course.md) предлагает пример, как написание тестов до написания кода, приводит к созданию тестируемых компонентов. Он также поможет тебе обнаружить и протестировать крайние случаи.
diff --git a/docs/ru/guide/essentials/passing-data.md b/docs/ru/guide/essentials/passing-data.md
index 942c7f42b..8dacf4f78 100644
--- a/docs/ru/guide/essentials/passing-data.md
+++ b/docs/ru/guide/essentials/passing-data.md
@@ -129,5 +129,5 @@ test('renders a greeting when show is true', async () => {
 
 - Используйте `props` и `data` опции при создании компонента для установки начального состояния компонента.
 - Используйте `setProps()`, чтобы изменить свойство во время теста.
-- Используйте ключевое слово `await` перед `setProps()`, чтобы убедится, что Vue обновил DOM, перед тем продолжением теста.
+- Используйте ключевое слово `await` перед `setProps()`, чтобы убедится, что Vue обновил DOM, перед продолжением теста.
 - Взаимодействие напрямую с вашим компонентом дает больше возможностей. Рассмотрите `setValue` или `trigger` в комбинации с `data`, чтобы убедиться, что все работает верно.

From 072cd79d907e6e6e8f1492bd7127d8cea0eb8cd3 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Fri, 27 Dec 2024 18:44:15 +0300
Subject: [PATCH 05/38] add 'slots' page

---
 docs/.vitepress/config/ru.mts                 |   2 +-
 docs/ru/guide/advanced/slots.md               | 191 ++++++++++++++++++
 .../guide/essentials/conditional-rendering.md |   6 +-
 docs/ru/guide/essentials/passing-data.md      |   6 +-
 4 files changed, 198 insertions(+), 7 deletions(-)
 create mode 100644 docs/ru/guide/advanced/slots.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index b865e2f3b..d1d9977ce 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -68,7 +68,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         {
           text: 'Углубленно',
           items: [
-            { text: 'Slots', link: '/guide/advanced/slots' },
+            { text: 'Слоты', link: '/ru/guide/advanced/slots' },
             {
               text: 'Asynchronous Behavior',
               link: '/guide/advanced/async-suspense'
diff --git a/docs/ru/guide/advanced/slots.md b/docs/ru/guide/advanced/slots.md
new file mode 100644
index 000000000..7dbff8f74
--- /dev/null
+++ b/docs/ru/guide/advanced/slots.md
@@ -0,0 +1,191 @@
+# Слоты
+
+Vue Test Utils предоставляет несколько полезных функций для тестирования компонентов, используя `slots`.
+
+## Простой пример
+
+Возможно, у вас есть `<layout>` компонент, который использует слот по умолчанию для отображения некоторого содержимого. Например:
+
+```js
+const Layout = {
+  template: `
+    <div>
+      <h1>Welcome!</h1>
+      <main>
+        <slot />
+      </main>
+      <footer>
+        Thanks for visiting.
+      </footer>
+    </div>
+  `
+}
+```
+
+Возможно, вы хотите написать тест, чтобы убедиться в том, что содержимое слота по умолчанию отрисовано. VTU предоставляет `slots` опцию в `mount` для этой цели:
+
+```js
+test('layout default slot', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      default: 'Main Content'
+    }
+  })
+
+  expect(wrapper.html()).toContain('Main Content')
+})
+```
+
+Тест пройден! В этом примере мы передаем содержимое некоторого текста в слот по умолчанию. Если ты хочешь быть еще более конкретным и убедиться, что содержимое слота по умолчанию отрисовано в `<main>`, вы могли бы изменить проверку:
+
+```js
+test('layout default slot', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      default: 'Main Content'
+    }
+  })
+
+  expect(wrapper.find('main').text()).toContain('Main Content')
+})
+```
+
+## Именованные слоты
+
+У вас может быть более сложный `<layout>` компонент с несколькими именованными слотами. Например:
+
+```js
+const Layout = {
+  template: `
+    <div>
+      <header>
+        <slot name="header" />
+      </header>
+
+      <main>
+        <slot name="main" />
+      </main>
+      <footer>
+        <slot name="footer" />
+      </footer>
+    </div>
+  `
+}
+```
+
+VTU также поддерживает это. Вы можете написать тест следующим образом. Обратите внимание, в этом примере мы передаем HTML вместо содержимого текста в слоты.
+
+```js
+test('layout full page layout', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      header: '<div>Header</div>',
+      main: '<div>Main Content</div>',
+      footer: '<div>Footer</div>'
+    }
+  })
+
+  expect(wrapper.html()).toContain('<div>Header</div>')
+  expect(wrapper.html()).toContain('<div>Main Content</div>')
+  expect(wrapper.html()).toContain('<div>Footer</div>')
+})
+```
+
+## Множественные слоты
+
+Вы также можете передать массив слотов:
+
+```js
+test('layout full page layout', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      default: [
+        '<div id="one">One</div>',
+        '<div id="two">Two</div>'
+      ]
+    }
+  })
+
+  expect(wrapper.find('#one').exists()).toBe(true)
+  expect(wrapper.find('#two').exists()).toBe(true)
+})
+```
+
+## Продвинутое использование
+
+Ты также можешь передать функцию отрисовки, объект с шаблоном или даже SFC, импортированный из `vue` файла, в слот опцию в `mount`:
+
+```js
+import { h } from 'vue'
+import Header from './Header.vue'
+
+test('layout full page layout', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      header: Header,
+      main: h('div', 'Main Content'),
+      sidebar: { template: '<div>Sidebar</div>' },
+      footer: '<div>Footer</div>'
+    }
+  })
+
+  expect(wrapper.html()).toContain('<div>Header</div>')
+  expect(wrapper.html()).toContain('<div>Main Content</div>')
+  expect(wrapper.html()).toContain('<div>Footer</div>')
+})
+```
+
+[Изучите тесты](https://github.com/vuejs/test-utils/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/tests/mountingOptions/slots.spec.ts#L124-L167) с большим количеством примеров и вариантов использования.
+
+## Слоты с ограниченной областью действия
+
+[Слоты с ограниченной областью действия](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) и привязки также доступны. 
+
+```js
+const ComponentWithSlots = {
+  template: `
+    <div class="scoped">
+      <slot name="scoped" v-bind="{ msg }" />
+    </div>
+  `,
+  data() {
+    return {
+      msg: 'world'
+    }
+  }
+}
+
+test('scoped slots', () => {
+  const wrapper = mount(ComponentWithSlots, {
+    slots: {
+      scoped: `<template #scoped="scope">
+        Hello {{ scope.msg }}
+        </template>
+      `
+    }
+  })
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+Когда используется шаблоны строк для содержимого слота, **если явно не указан `<template #scoped="scopeVar">` тег**, слот становится доступным как `params` объект при вычислении слота.
+
+```js
+test('scoped slots', () => {
+  const wrapper = mount(ComponentWithSlots, {
+    slots: {
+      scoped: `Hello {{ params.msg }}` // no wrapping template tag provided, slot scope exposed as "params"
+    }
+  })
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+## Заключение
+
+- Используйте `slots` опцию в `mount` для тестирования компонента, использующего `slot`, чтобы проверить правильность отрисовки.
+- Содержимое может быть либо строкой, либо функцией рендеринга или импортированным SFC.
+- Используйте `default` для слота по умолчанию и корректное имя для именованных слотов.
+- Слоты с ограниченной областью действия и `#` сокращение также поддерживаются.
diff --git a/docs/ru/guide/essentials/conditional-rendering.md b/docs/ru/guide/essentials/conditional-rendering.md
index 6d52ee49d..82a534eb6 100644
--- a/docs/ru/guide/essentials/conditional-rendering.md
+++ b/docs/ru/guide/essentials/conditional-rendering.md
@@ -1,6 +1,6 @@
 # Условная отрисовка
 
-Vue Test Utils имеет ряд возможностей для отрисовки и проверки состояния компонента с целью подтверждения корректного поведения. В этой статье рассматривается, как отрисовать компоненты, а также проверка верной отрисовки контента.
+Vue Test Utils имеет ряд возможностей для отрисовки и проверки состояния компонента с целью подтверждения корректного поведения. В этой статье рассматривается, как отрисовать компоненты, а также проверка верной отрисовки содержимого.
 
 Эта статья также доступна как [короткое видео](https://www.youtube.com/watch?v=T3CHtGgEFTs&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA&index=15).
 
@@ -91,9 +91,9 @@ test('renders an admin link', () => {
 })
 ```
 
-Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` при создании компонента будет всегда выше по приоритету, чем другие стандартные значения.
+Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` опция в `mount` будет всегда выше по приоритету, чем другие стандартные значения.
 
-Чтобы изучить какие другие опции при создании компонента существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
+Чтобы изучить какие другие опции в `mount` существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
 
 ## Проверка видимости элемента
 
diff --git a/docs/ru/guide/essentials/passing-data.md b/docs/ru/guide/essentials/passing-data.md
index 8dacf4f78..3c07321ee 100644
--- a/docs/ru/guide/essentials/passing-data.md
+++ b/docs/ru/guide/essentials/passing-data.md
@@ -2,7 +2,7 @@
 
 Vue Test Utils предоставляет несколько путей для установки данных и свойств у компонента, чтобы позволить тебе полностью протестировать поведение компонента в различных ситуациях.
 
-В этой главе мы исследуем `data` и `props` опции при создании компонента, а также `VueWrapper.setProps()` для динамического обновления свойств компонента.
+В этой главе мы исследуем `data` и `props` опции в `mount`, а также `VueWrapper.setProps()` для динамического обновления свойств компонента.
 
 ## Компонент для пароля
 
@@ -60,7 +60,7 @@ const Password = {
 }
 ```
 
-Чтобы протестировать это, нам нужно установить `minLength`, а также `password`, который меньше, чем это число. Мы можем сделать это используя `data` и `props` опции при создании компонента. И наконец, мы проверим, что сообщение об ошибке отрисовалось:
+Чтобы протестировать это, нам нужно установить `minLength`, а также `password`, который меньше, чем это число. Мы можем сделать это используя `data` и `props` опции в `mount` . И наконец, мы проверим, что сообщение об ошибке отрисовалось:
 
 ```js
 test('renders an error if length is too short', () => {
@@ -127,7 +127,7 @@ test('renders a greeting when show is true', async () => {
 
 ## Заключение
 
-- Используйте `props` и `data` опции при создании компонента для установки начального состояния компонента.
+- Используйте `props` и `data` опции в `mount` для установки начального состояния компонента.
 - Используйте `setProps()`, чтобы изменить свойство во время теста.
 - Используйте ключевое слово `await` перед `setProps()`, чтобы убедится, что Vue обновил DOM, перед продолжением теста.
 - Взаимодействие напрямую с вашим компонентом дает больше возможностей. Рассмотрите `setValue` или `trigger` в комбинации с `data`, чтобы убедиться, что все работает верно.

From 7a81ab7b7a4089a19bbe00c4e0f5657513d07afc Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Sun, 29 Dec 2024 13:48:02 +0300
Subject: [PATCH 06/38] add 'asynchronous-behavior' page

---
 docs/.vitepress/config/ru.mts            |   4 +-
 docs/ru/guide/advanced/async-suspense.md | 150 +++++++++++++++++++++++
 2 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 docs/ru/guide/advanced/async-suspense.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index d1d9977ce..ebd819524 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -70,8 +70,8 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           items: [
             { text: 'Слоты', link: '/ru/guide/advanced/slots' },
             {
-              text: 'Asynchronous Behavior',
-              link: '/guide/advanced/async-suspense'
+              text: 'Асинхронное поведение',
+              link: '/ru/guide/advanced/async-suspense'
             },
             {
               text: 'Making HTTP Requests',
diff --git a/docs/ru/guide/advanced/async-suspense.md b/docs/ru/guide/advanced/async-suspense.md
new file mode 100644
index 000000000..2f98af7fd
--- /dev/null
+++ b/docs/ru/guide/advanced/async-suspense.md
@@ -0,0 +1,150 @@
+# Асинхронное поведение
+
+Возможно, вы заметили некоторые другие части руководства используют `await`, когда вызываются некоторые методы у `wrapper`, такие как `trigger` и `setValue`. Что все это значит?
+
+Возможно, вы знаете, Vue обновляется реактивно: когда ты меняешь значение, DOM автоматически изменяется, чтобы отразить последнее изменение. [Vue делает эти обновления асинхронно](https://v3.vuejs.org/guide/change-detection.html#async-update-queue). В отличие от программ тестирования, например, Jest обновляется _синхронно_. Это может вызвать некоторые неожиданные результаты в тестах.
+
+Давайте посмотрим на некоторые стратегии, чтобы убедиться, что Vue обновляет DOM, как ожидается, когда мы запускаем наши тесты.
+
+## Простой пример - Обновление при помощи `trigger`
+
+Давайте пере используем `<Counter>` компонент из [обработка события](/ru/guide/essentials/event-handling) с одним изменением; мы сейчас отразим `count` в `template`.
+
+```js
+const Counter = {
+  template: `
+    <p>Count: {{ count }}</p>
+    <button @click="handleClick">Increment</button>
+  `,
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.count += 1
+    }
+  }
+}
+```
+
+Давайте напишем тест, чтобы убедиться в том, что `count` увеличиться:
+
+```js
+test('increments by 1', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+К удивлению, тест не пройден! Причина в том, что, не смотря на увеличение `count`, Vue не обновит DOM до следующего event loop тика. По этой причине, проверка (`expect()...`) будет вызвана до того, как Vue обновит DOM.
+
+:::tip
+Если ты хочешь изучить больше об этом базовом JavaScript поведении, прочитайте про [Event Loop и его macrotasks и microtasks](https://javascript.info/event-loop#macrotasks-and-microtasks).
+:::
+
+Как мы можем изменить это? Vue в действительности предоставляет возможность нам ждать, пока DOM не обновится: `nextTick`.
+
+```js {1,7}
+import { nextTick } from 'vue'
+
+test('increments by 1', async () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  await nextTick()
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+Теперь тест будет пройден, чтобы мы убедились в том, что следующий "тик" выполнился и DOM обновился перед запуском дальнейших проверок.
+
+Поскольку `await nextTick()` является распространенным, Vue Test Utils предоставляет сокращение. Методы, которые вызывают обновление DOM, такие как `trigger` и `setValue`, вернут `nextTick`, поэтому ты можешь просто указать `await` перед ними:
+
+```js {4}
+test('increments by 1', async () => {
+  const wrapper = mount(Counter)
+
+  await wrapper.find('button').trigger('click')
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+## Другое асинхронное поведение
+
+`nextTick` будет полезным, чтобы убедиться в том, что некоторые изменения в реактивных данных были отображены в DOM до продолжения теста. Однако, иногда вы можете захотеть убедиться в другом, что асинхронное поведение, не связанное с Vue, тоже завершено.
+
+Распространенный пример - это функция, которая возвращает `Promise`. Возможно, вы имитировали `axios` HTTP-клиент, используя `jest.mock`:
+
+```js
+jest.spyOn(axios, 'get').mockResolvedValue({ data: 'some mocked data!' })
+```
+
+В данном случае Vue не знает о невыполненном Promise, поэтому вызов `nextTick` не будет работать - ваша проверка может выполниться до того, как Promise выполнится. Для таких сценариев Vue Test Utils предоставляет [`flushPromises`](/ru/api/#flushPromises), который заставляет все невыполненные промисы выполниться немедленно.
+
+Давайте посмотрим на пример:
+
+```js{1,12}
+import { flushPromises } from '@vue/test-utils'
+import axios from 'axios'
+
+jest.spyOn(axios, 'get').mockResolvedValue({ data: 'some mocked data!' })
+
+test('uses a mocked axios HTTP client and flushPromises', async () => {
+  // какой-то компонент, который выполняет HTTP-запрос, вызванный в `created`, используя `axios`
+  const wrapper = mount(AxiosComponent)
+
+  await flushPromises() // axios промис выполнился сразу
+
+  // после линии выше axios запрос выполнился с имитированными данными.
+})
+```
+
+:::tip
+Если вы хотите узнать больше о тестировании запросов в компонентах, ознакомьтесь с руководством [Выполнение HTTP запросов](/ru/guide/advanced/http-requests.md).
+:::
+
+## Тестирование асинхронного `setup`
+
+Если компонент, который вы хотите протестировать, использует асинхронный `setup`, тогда вы должны создать компонент внутри `Suspense` компонента (как вы делали, когда использовали его в вашем приложении).
+
+Например, этот `Async` компонент:
+
+```js
+const Async = defineComponent({
+  async setup() {
+    // await something
+  }
+})
+```
+
+должно быть протестировано следующим образом:
+
+```js
+test('Async component', async () => {
+  const TestComponent = defineComponent({
+    components: { Async },
+    template: '<Suspense><Async/></Suspense>'
+  })
+
+  const wrapper = mount(TestComponent)
+  await flushPromises();
+  // ...
+})
+```
+
+Обратите внимание: для получения доступа к экземпляру `vm` вашего `Async` компонента используйте возвращаемое значение у `wrapper.findComponent(Async)`. Поскольку новый компонент определен и добавлен в этом сценарии, оболочка, возвращаемая `mount(TestComponent)` , содержит его собственный (пустой) `vm`.
+
+## Заключение
+
+- Vue обновляет DOM асинхронно, но программы тестирования выполняют код синхронно.
+- Используйте `await nextTick()`, чтобы удостовериться в том, что DOM обновился до того, как тесты продолжаться.
+- Функции, которые могут обновлять DOM (например, `trigger` и `setValue`) возвращают `nextTick`, поэтому вам нужно использовать `await`.
+- Используйте `flushPromises` из Vue Test Utils, чтобы выполнить любые невыполненные промисы, не связанные с Vue (такие как API запросы).
+- Используйте `Suspense` для тестирования компонентов с асинхронным `setup`, указывая `async` для функции теста.

From c632c7b934e08528964b79253f95096672a35ae6 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Mon, 30 Dec 2024 13:17:46 +0300
Subject: [PATCH 07/38] add `http-requests`

---
 docs/.vitepress/config/ru.mts           |   4 +-
 docs/ru/guide/advanced/http-requests.md | 174 ++++++++++++++++++++++++
 2 files changed, 176 insertions(+), 2 deletions(-)
 create mode 100644 docs/ru/guide/advanced/http-requests.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index ebd819524..3b97510fb 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -74,8 +74,8 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               link: '/ru/guide/advanced/async-suspense'
             },
             {
-              text: 'Making HTTP Requests',
-              link: '/guide/advanced/http-requests'
+              text: 'Выполнение HTTP запросов',
+              link: '/ru/guide/advanced/http-requests'
             },
             { text: 'Transitions', link: '/guide/advanced/transitions' },
             {
diff --git a/docs/ru/guide/advanced/http-requests.md b/docs/ru/guide/advanced/http-requests.md
new file mode 100644
index 000000000..13138ba61
--- /dev/null
+++ b/docs/ru/guide/advanced/http-requests.md
@@ -0,0 +1,174 @@
+# Выполнение HTTP запросов
+
+Современные программы тестирования уже предоставляют множество замечательных возможностей, когда они тестируют HTTP запросы. Таким образом, Vue Test Utils не содержит какие-либо уникальные инструменты для такого тестирования.
+
+Однако это важная функция для тестирования, и существуют несколько подводных камней, на которые мы хотим обратить внимание.
+
+В этом разделе мы исследуем несколько подходов для выполнения, имитации и проверки HTTP запросов.
+
+## Список записей в блоге
+
+Давайте начнем с простого примера. Следующий `PostList` компонент отрисовывает список записей блога, полученных от внешнего API. Для получения этих постов компонент содержит `button` элемент, который вызывает запрос:
+
+```vue
+<template>
+  <button @click="getPosts">Get posts</button>
+  <ul>
+    <li v-for="post in posts" :key="post.id" data-test="post">
+      {{ post.title }}
+    </li>
+  </ul>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      posts: null
+    }
+  },
+  methods: {
+    async getPosts() {
+      this.posts = await axios.get('/api/posts')
+    }
+  }
+}
+</script>
+```
+
+Есть несколько вещей, которые мы должны сделать, чтобы протестировать этот компонент правильно.
+
+Наша первая цель - это протестировать этот компонент **без фактического обращения к API**. Это создало бы хрупкий и потенциально медленный тест.
+
+Во вторых, нам нужно удостовериться, что компонент выполнил верный вызов с соответствующими параметрами. Мы не будем получать результаты от этого API, нам все еще нужно убедиться, что мы запросили нужные данные.
+
+Также нам нужно убедиться в том, что DOM обновился и отображает данные. Мы сделаем так, используя `flushPromises()` функцию из `@vue/test-utils`.
+
+```js
+import { mount, flushPromises } from '@vue/test-utils'
+import axios from 'axios'
+import PostList from './PostList.vue'
+
+const mockPostList = [
+  { id: 1, title: 'title1' },
+  { id: 2, title: 'title2' }
+]
+
+// Следующие строки говорят Jest имитировать любой вызов к `axios.get`
+// и вместо этого вернуть `mockPostList`
+jest.spyOn(axios, 'get').mockResolvedValue(mockPostList)
+
+test('loads posts on button click', async () => {
+  const wrapper = mount(PostList)
+
+  await wrapper.get('button').trigger('click')
+
+  // Давайте убедимся, что мы вызвали axios.get правильное количество раз и 
+  // с правильными параметрами.
+  expect(axios.get).toHaveBeenCalledTimes(1)
+  expect(axios.get).toHaveBeenCalledWith('/api/posts')
+
+  // Ждем пока DOM обновится.
+  await flushPromises()
+
+  // И наконец, мы должны убедиться, что мы отрисовали содержимое от API.
+  const posts = wrapper.findAll('[data-test="post"]')
+
+  expect(posts).toHaveLength(2)
+  expect(posts[0].text()).toContain('title1')
+  expect(posts[1].text()).toContain('title2')
+})
+```
+
+Обратите внимание, что мы добавили префикс `mock` к переменной `mockPostList`. В противном случае мы получим ошибку: "The module factory of jest.mock() is not allowed to reference any out-of-scope variables.". Это специфика Jest, и вы можете прочитать про такое поведение более подробно [в их документации](https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter).
+
+Также обратите внимание, как мы ожидали `flushPromises` и после взаимодействовали с компонентом. Мы делаем так, чтобы убедиться в том, что DOM обновился до того, как тест продолжится.
+
+:::tip Альтернативы jest.mock()
+Есть несколько путей настройки имитации в Jest. Тот, который используется в примере выше, является самым простым. Для более мощных альтернатив вам может понадобиться [axios-mock-adapter](https://github.com/ctimmerm/axios-mock-adapter) или [msw](https://github.com/mswjs/msw), среди прочих.
+:::
+
+### Проверка состояния загрузки
+
+Теперь этот `PostList` компонент довольно полезный, но ему недостает некоторых других замечательных возможностей. Давайте расширим его, чтобы компонент отобразил сообщение, пока идет загрузка ваших постов!
+
+А также давайте отключим `<button>` элемент во время загрузки. Мы не хотим, чтобы пользователи продолжали отправлять запросы во время получения ответа!
+
+```vue {2,4,19,24,28}
+<template>
+  <button :disabled="loading" @click="getPosts">Get posts</button>
+
+  <p v-if="loading" role="alert">Loading your posts…</p>
+  <ul v-else>
+    <li v-for="post in posts" :key="post.id" data-test="post">
+      {{ post.title }}
+    </li>
+  </ul>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      posts: null,
+      loading: null
+    }
+  },
+  methods: {
+    async getPosts() {
+      this.loading = true
+
+      this.posts = await axios.get('/api/posts')
+
+      this.loading = null
+    }
+  }
+}
+</script>
+```
+
+Давайте напишем тест для проверки того, что все элементы, связанные с загрузкой, отрисовываются вовремя.
+
+```js
+test('displays loading state on button click', async () => {
+  const wrapper = mount(PostList)
+
+  // Обратите внимание, что мы запускаем следующие проверки до того, как нажали на кнопку.
+  // Здесь компонент должен быть не в состоянии загрузки.
+  expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  expect(wrapper.get('button').attributes()).not.toHaveProperty('disabled')
+
+  // Теперь давайте вызовем нажатие как обычно.
+  await wrapper.get('button').trigger('click')
+
+  // Мы проверяем состояние загрузки до того, как сбросили все промисы.
+  expect(wrapper.find('[role="alert"]').exists()).toBe(true)
+  expect(wrapper.get('button').attributes()).toHaveProperty('disabled')
+
+  // Как мы делали раньше, ждем, пока DOM не обновится.
+  await flushPromises()
+
+  // После этого мы возвращаемся в состояния без загрузки.
+  expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  expect(wrapper.get('button').attributes()).not.toHaveProperty('disabled')
+})
+```
+
+## HTTP запросы от Vuex
+
+Типичный сценарий для более сложных приложений - это вызвать Vuex действие, которое выполнит HTTP запрос.
+
+Это не отличается от примера, описанного выше. Вы можете хотеть загрузить хранилище как есть и имитировать сервисы, такие как `axios`. В данном случае мы имитируем наши границы системы, тем самым достигая более высокого уровня достоверности в наших тестах.
+
+Вы можете ознакомиться с [Тестирование Vuex](/ru/guide/advanced/vuex.md) разделом для большей информации о тестировании Vuex с помощью Vue Test Utils.
+
+## Заключение
+
+- Vue Test Utils не требует специальных инструментов для тестирования HTTP запросов. Единственное, что нужно учитывать, это то, что мы тестируем асинхронное поведение.
+- Тесты не должны зависеть от внешних сервисов. Используйте инструменты имитации, такие как `jest.mock`, чтобы избежать этого.
+- `flushPromises()` - это полезный инструмент, чтобы убедиться в том, что DOM обновляется после асинхронной операции.
+- Непосредственный вызов HTTP запросов при помощи взаимодействия с компонентом делает ваш тест более устойчивым.

From 143530bd7f28bdb849ec3090e323eb4d3c50738e Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Tue, 31 Dec 2024 11:41:44 +0300
Subject: [PATCH 08/38] add `transitions` & `community-learning` pages

---
 docs/.vitepress/config/ru.mts                 | 20 +++---
 docs/ru/guide/advanced/async-suspense.md      |  2 +-
 docs/ru/guide/advanced/transitions.md         | 69 +++++++++++++++++++
 .../guide/extending-vtu/community-learning.md |  8 +++
 4 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 docs/ru/guide/advanced/transitions.md
 create mode 100644 docs/ru/guide/extending-vtu/community-learning.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index 3b97510fb..2f0ca0ab8 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -77,26 +77,26 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               text: 'Выполнение HTTP запросов',
               link: '/ru/guide/advanced/http-requests'
             },
-            { text: 'Transitions', link: '/guide/advanced/transitions' },
+            { text: 'Transitions', link: '/ru/guide/advanced/transitions' },
             {
               text: 'Component Instance',
-              link: '/guide/advanced/component-instance'
+              link: '/ru/guide/advanced/component-instance'
             },
             {
               text: 'Reusability and Composition',
-              link: '/guide/advanced/reusability-composition'
+              link: '/ru/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: 'Testing v-model', link: '/ru/guide/advanced/v-model' },
+            { text: 'Testing Vuex', link: '/ru/guide/advanced/vuex' },
+            { text: 'Testing Vue Router', link: '/ru/guide/advanced/vue-router' },
+            { text: 'Testing Teleport', link: '/ru/guide/advanced/teleport' },
             {
               text: 'Stubs and Shallow Mount',
-              link: '/guide/advanced/stubs-shallow-mount'
+              link: '/ru/guide/advanced/stubs-shallow-mount'
             },
             {
               text: 'Testing Server-side Rendering',
-              link: '/guide/advanced/ssr'
+              link: '/ru/guide/advanced/ssr'
             }
           ]
         },
@@ -106,7 +106,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
             { text: 'Плагины', link: '/guide/extending-vtu/plugins' },
             {
               text: 'Сообщество и обучение',
-              link: '/guide/extending-vtu/community-learning'
+              link: '/ru/guide/extending-vtu/community-learning'
             }
           ]
         },
diff --git a/docs/ru/guide/advanced/async-suspense.md b/docs/ru/guide/advanced/async-suspense.md
index 2f98af7fd..0918221c4 100644
--- a/docs/ru/guide/advanced/async-suspense.md
+++ b/docs/ru/guide/advanced/async-suspense.md
@@ -97,7 +97,7 @@ import axios from 'axios'
 jest.spyOn(axios, 'get').mockResolvedValue({ data: 'some mocked data!' })
 
 test('uses a mocked axios HTTP client and flushPromises', async () => {
-  // какой-то компонент, который выполняет HTTP-запрос, вызванный в `created`, используя `axios`
+  // какой-то компонент, который выполняет HTTP запрос, вызванный в `created`, используя `axios`
   const wrapper = mount(AxiosComponent)
 
   await flushPromises() // axios промис выполнился сразу
diff --git a/docs/ru/guide/advanced/transitions.md b/docs/ru/guide/advanced/transitions.md
new file mode 100644
index 000000000..161e293ea
--- /dev/null
+++ b/docs/ru/guide/advanced/transitions.md
@@ -0,0 +1,69 @@
+# Transitions
+
+В общем, вы можете захотеть протестировать свой результат в DOM после перехода, и поэтому Vue Test Utils имитирует `<transition>` и `<transition-group>` по умолчанию.
+
+Ниже приведен простой компонент, который переключает содержимое, обернутое в плавный переход:
+
+```vue
+<template>
+  <button @click="show = !show">Toggle</button>
+
+  <transition name="fade">
+    <p v-if="show">hello</p>
+  </transition>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const show = ref(false)
+
+    return {
+      show
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+</style>
+```
+
+Поскольку Vue Test Utils ставит заглушку на встроенные переходы, вы можете протестировать компонент выше, как вы бы протестировали любой другой компонент:
+
+```js
+import Component from './Component.vue'
+import { mount } from '@vue/test-utils'
+
+test('works with transitions', async () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.find('hello').exists()).toBe(false)
+
+  await wrapper.find('button').trigger('click')
+
+  // After clicking the button, the <p> element exists and is visible
+  expect(wrapper.get('p').text()).toEqual('hello')
+})
+```
+
+## Частичная поддержка
+
+Встроенные в Vue Test Utils заглушки перехода являются простыми и не покрывают всех возможностей Vue [Transition](https://vuejs.org/guide/built-ins/transition). Например, [javascript hooks](https://vuejs.org/guide/built-ins/transition#javascript-hooks) не поддерживаются. Это ограничение, возможно, может привести к Vue предупреждениям.
+
+
+::: tip
+Возможные решения:
+- Вы можете выключить заглушку по умолчанию, установив [global stubs transition](../../api/#global-stubs) в false значение
+- Вы можете создать свою собственную заглушку перехода, которая может обработать эти хуки, если необходимо.
+- Вы можете отследить предупреждения в тесте и отключить их.
+:::
diff --git a/docs/ru/guide/extending-vtu/community-learning.md b/docs/ru/guide/extending-vtu/community-learning.md
new file mode 100644
index 000000000..f407cfb47
--- /dev/null
+++ b/docs/ru/guide/extending-vtu/community-learning.md
@@ -0,0 +1,8 @@
+# Сообщество и обучение
+
+- [Vue 3 Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/v3/). Онлайн руководство.
+- [Become a Ninja with Vue 3](https://books.ninja-squad.com/vue). Электронная книга и онлайн курс.
+- [Vue.js 3: The Composition API](https://vuejs-course.com/composition-api). Онлайн курс (включая модуль тестирования).
+- [Testing Vue 3 apps with Vue Test Utils](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA). Плейлист.
+- [Testing Vue.js Components](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth). Онлайн курс.
+- [Front-end Testing and a tale of three users](https://afontcu.dev/frontend-testing-code-consumers/). Посты в блоге.

From 6f1dcebee1deffb31f34cfe632c4e53bd79c68ab Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Wed, 1 Jan 2025 17:01:16 +0300
Subject: [PATCH 09/38] add `component instance` page

---
 docs/.vitepress/config/ru.mts                |  2 +-
 docs/ru/guide/advanced/component-instance.md | 84 ++++++++++++++++++++
 2 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 docs/ru/guide/advanced/component-instance.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index 2f0ca0ab8..45ec8a57c 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -79,7 +79,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
             },
             { text: 'Transitions', link: '/ru/guide/advanced/transitions' },
             {
-              text: 'Component Instance',
+              text: 'Экземпляр компонента',
               link: '/ru/guide/advanced/component-instance'
             },
             {
diff --git a/docs/ru/guide/advanced/component-instance.md b/docs/ru/guide/advanced/component-instance.md
new file mode 100644
index 000000000..28622d873
--- /dev/null
+++ b/docs/ru/guide/advanced/component-instance.md
@@ -0,0 +1,84 @@
+# Экземпляр компонента
+
+[`mount`](/api/#mount) возвращает `VueWrapper` с множеством удобных методов для тестирования Vue компонентов. Иногда вы можете захотеть получить доступ к Vue экземпляру. Вы можете получить доступ к нему с помощью `vm` свойства.
+
+## Простой пример
+
+Здесь простой компонент, который объединяет props и data для отрисовки приветствия
+
+```ts
+test('renders a greeting', () => {
+  const Comp = {
+    template: `<div>{{ msg1 }} {{ msg2 }}</div>`,
+    props: ['msg1'],
+    data() {
+      return {
+        msg2: 'world'
+      }
+    }
+  }
+
+  const wrapper = mount(Comp, {
+    props: {
+      msg1: 'hello'
+    }
+  })
+
+  expect(wrapper.html()).toContain('hello world')
+})
+```
+
+Давайте посмотрим, что доступно на `vm` при помощи `console.log(wrapper.vm)`:
+
+```js
+{
+  msg1: [Getter/Setter],
+  msg2: [Getter/Setter],
+  hasOwnProperty: [Function]
+}
+```
+
+Мы видим как `msg1`, так и `msg2`! Такие вещи, как `methods` и `computed` свойства отобразятся тоже, если они определены. Во время написания теста, хотя в общем рекомендуется проверять DOM (например, используя `wrapper.html()`), в некоторых редких случаях вы можете захотеть получить доступ к Vue экземпляру. 
+
+## Использование `getComponent` и `findComponent`
+
+`getComponent` и `findComponent` возвращает `VueWrapper` - сильно похожий на то, что вернет `mount`. Это значит, что ты можешь также получить доступ ко всем таким же свойствам, включая `vm`, от результата `getComponent` или `findComponent`.
+
+Здесь простой пример:
+
+```js
+test('asserts correct props are passed', () => {
+  const Foo = {
+    props: ['msg'],
+    template: `<div>{{ msg }}</div>`
+  }
+
+  const Comp = {
+    components: { Foo },
+    template: `<div><foo msg="hello world" /></div>`
+  }
+
+  const wrapper = mount(Comp)
+
+  expect(wrapper.getComponent(Foo).vm.msg).toBe('hello world')
+  expect(wrapper.getComponent(Foo).props()).toEqual({ msg: 'hello world' })
+})
+```
+
+Для более тщательного способа протестировать это, могла бы стать проверка отрисованного содержимого. Это значит, что вы проверяете, что правильный prop передан *и* отрисован.
+
+
+:::warning WrapperLike тип при использовании CSS селектора
+При использовании `wrapper.findComponent('.foo')`, например, когда VTU вернет `WrapperLike` тип. Потому что функциональным компонентам мог понадобиться `DOMWrapper`, иначе `VueWrapper`. Вы можете заставить вернуть `VueWrapper`, передав правильный тип компонента:
+
+```typescript
+wrapper.findComponent('.foo') // вернет WrapperLike
+wrapper.findComponent<typeof FooComponent>('.foo') // вернет VueWrapper
+wrapper.findComponent<DefineComponent>('.foo') // вернет VueWrapper
+```
+:::
+
+## Заключение
+
+- Используйте `vm` для получения доступа к внутреннему Vue экземпляру
+- `getComponent` и `findComponent` возвращают Vue оболочку. Эти Vue экземпляры также доступны через `vm`

From 94731f466dbfa89355072f4ca6375fd01883456c Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Fri, 3 Jan 2025 11:10:29 +0300
Subject: [PATCH 10/38] add `reusability and composition` page

---
 docs/.vitepress/config/ru.mts                 |  12 +-
 docs/ru/guide/advanced/async-suspense.md      |   3 +-
 docs/ru/guide/advanced/http-requests.md       |   3 +-
 .../guide/advanced/reusability-composition.md | 214 ++++++++++++++++++
 4 files changed, 224 insertions(+), 8 deletions(-)
 create mode 100644 docs/ru/guide/advanced/reusability-composition.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index 45ec8a57c..445a0e185 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -83,19 +83,19 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
               link: '/ru/guide/advanced/component-instance'
             },
             {
-              text: 'Reusability and Composition',
+              text: 'Переиспользование и композиция',
               link: '/ru/guide/advanced/reusability-composition'
             },
-            { text: 'Testing v-model', link: '/ru/guide/advanced/v-model' },
-            { text: 'Testing Vuex', link: '/ru/guide/advanced/vuex' },
-            { text: 'Testing Vue Router', link: '/ru/guide/advanced/vue-router' },
-            { text: 'Testing Teleport', link: '/ru/guide/advanced/teleport' },
+            { text: 'Тестирование v-model', link: '/ru/guide/advanced/v-model' },
+            { text: 'Тестирование Vuex', link: '/ru/guide/advanced/vuex' },
+            { text: 'Тестирование Vue Router', link: '/ru/guide/advanced/vue-router' },
+            { text: 'Тестирование Teleport', link: '/ru/guide/advanced/teleport' },
             {
               text: 'Stubs and Shallow Mount',
               link: '/ru/guide/advanced/stubs-shallow-mount'
             },
             {
-              text: 'Testing Server-side Rendering',
+              text: 'Тестирование Server-side Rendering',
               link: '/ru/guide/advanced/ssr'
             }
           ]
diff --git a/docs/ru/guide/advanced/async-suspense.md b/docs/ru/guide/advanced/async-suspense.md
index 0918221c4..3e3973bf0 100644
--- a/docs/ru/guide/advanced/async-suspense.md
+++ b/docs/ru/guide/advanced/async-suspense.md
@@ -97,7 +97,8 @@ import axios from 'axios'
 jest.spyOn(axios, 'get').mockResolvedValue({ data: 'some mocked data!' })
 
 test('uses a mocked axios HTTP client and flushPromises', async () => {
-  // какой-то компонент, который выполняет HTTP запрос, вызванный в `created`, используя `axios`
+  // какой-то компонент, который выполняет HTTP запрос, 
+  // вызванный в `created`, используя `axios`
   const wrapper = mount(AxiosComponent)
 
   await flushPromises() // axios промис выполнился сразу
diff --git a/docs/ru/guide/advanced/http-requests.md b/docs/ru/guide/advanced/http-requests.md
index 13138ba61..be7f2c3f4 100644
--- a/docs/ru/guide/advanced/http-requests.md
+++ b/docs/ru/guide/advanced/http-requests.md
@@ -137,7 +137,8 @@ export default {
 test('displays loading state on button click', async () => {
   const wrapper = mount(PostList)
 
-  // Обратите внимание, что мы запускаем следующие проверки до того, как нажали на кнопку.
+  // Обратите внимание, что мы запускаем следующие проверки до того, 
+  // как нажали на кнопку.
   // Здесь компонент должен быть не в состоянии загрузки.
   expect(wrapper.find('[role="alert"]').exists()).toBe(false)
   expect(wrapper.get('button').attributes()).not.toHaveProperty('disabled')
diff --git a/docs/ru/guide/advanced/reusability-composition.md b/docs/ru/guide/advanced/reusability-composition.md
new file mode 100644
index 000000000..6ffba6e45
--- /dev/null
+++ b/docs/ru/guide/advanced/reusability-composition.md
@@ -0,0 +1,214 @@
+# Переиспользование и композиция
+
+Обычно:
+
+- `global.mixins`.
+- `global.directives`.
+
+## Тестирование composables
+
+При работе с composition API и созданием composables вам часто хочется протестировать только composable. Давайте начнем с простого примера:
+
+```typescript
+export function useCounter() {
+  const counter = ref(0)
+
+  function increase() {
+    counter.value += 1
+  }
+
+  return { counter, increase }
+}
+```
+
+В данном случае вам даже не нужен `@vue/test-utils`. Вот соответствующий тест:
+
+```typescript
+test('increase counter on call', () => {
+  const { counter, increase } = useCounter()
+
+  expect(counter.value).toBe(0)
+
+  increase()
+
+  expect(counter.value).toBe(1)
+})
+```
+
+Для более сложных composables, которые используют хуки жизненного цикла, например, `onMounted` или `provide`/`inject`, вы можете создать простой вспомогательный компонент для тестирования. Следующий composable получает данные пользователя внутри `onMounted` хука.
+
+```typescript
+export function useUser(userId) {
+  const user = ref()
+  
+  function fetchUser(id) {
+    axios.get(`users/${id}`)
+      .then(response => (user.value = response.data))
+  }
+
+  onMounted(() => fetchUser(userId))
+
+  return { user }
+}
+```
+
+Для тестирования этого composable вы можете создать простой `TestComponent` в рамках тестов. `TestComponent` должен использовать composable точно так же, как использовали бы его настоящие компоненты.
+
+```typescript
+// Имитированный API запрос
+jest.spyOn(axios, 'get').mockResolvedValue({ data: { id: 1, name: 'User' } })
+
+test('fetch user on mount', async () => {
+  const TestComponent = defineComponent({
+    props: {
+      // Определить props, чтобы протестировать composable 
+      // с различными входными аргументами
+      userId: {
+        type: Number,
+        required: true
+      }
+    },
+    setup (props) {
+      return {
+        // Вызовите composable и верните все значения в ваш компонент,
+        // чтобы вы могли получить доступ к ним при помощи wrapper.vm
+        ...useUser(props.userId)
+      }
+    }
+  })
+
+  const wrapper = mount(TestComponent, {
+    props: {
+      userId: 1
+    }
+  })
+
+  expect(wrapper.vm.user).toBeUndefined()
+
+  await flushPromises()
+
+  expect(wrapper.vm.user).toEqual({ id: 1, name: 'User' })
+})
+```
+
+## Provide / inject
+
+Vue предоставляет возможность передать props во все дочерние компоненты при помощи `provide` и `inject`. Лучший вариант протестировать это поведение - это протестировать все дерево (родитель + дети). Но иногда это невозможно, потому что дерево слишком сложное, либо вы хотите только протестировать один composable.
+
+### Тестирование `provide`
+
+Давайте предположим следующий компонент, который вы хотите протестировать:
+
+```vue
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+provide('my-key', 'some-data')
+</script>
+```
+
+В этом случае вы могли бы отрисовать настоящий дочерний компонент и протестировать правильное использование `provide`, либо вы можете создать простой вспомогательный компонент для тестирования и передать его в слот по умолчанию. 
+
+```typescript
+test('provides correct data', () => {
+  const TestComponent = defineComponent({
+    template: '<span id="provide-test">{{value}}</span>',
+    setup () {
+      const value = inject('my-key')
+      return { value }
+    }
+  })
+
+  const wrapper = mount(ParentComponent, {
+    slots: {
+      default: () => h(TestComponent)
+    }
+  })
+
+  expect(wrapper.find('#provide-test').text()).toBe('some-data')
+})
+```
+
+Если твой компонент не содержит слот, вы можете использовать [`stub`](./stubs-shallow-mount.md#Stubbing-a-single-child-component)
+и заменить дочерний компонент на ваш вспомогательный компонент:
+
+```vue
+<template>
+  <div>
+    <SomeChild />
+  </div>
+</template>
+
+<script setup>
+import SomeChild from './SomeChild.vue'
+
+provide('my-key', 'some-data')
+</script>
+```
+
+И тест:
+
+```typescript
+test('provides correct data', () => {
+  const TestComponent = defineComponent({
+    template: '<span id="provide-test">{{value}}</span>',
+    setup () {
+      const value = inject('my-key')
+      return { value }
+    }
+  })
+
+  const wrapper = mount(ParentComponent, {
+    global: {
+      stubs: {
+        SomeChild: TestComponent
+      }
+    }
+  })
+
+  expect(wrapper.find('#provide-test').text()).toBe('some-data')
+})
+```
+
+### Тестирование `inject`
+
+Когда ваш компонент использует `inject` и вам нужно передать данные при помощи `provide`, вы можете использовать `global.provide` опцию.
+
+```vue
+<template>
+  <div>
+    {{ value }}
+  </div>
+</template>
+
+<script setup>
+const value = inject('my-key')
+</script>
+```
+
+Unit тест мог выглядеть примерно так: 
+
+```typescript
+test('renders correct data', () => {
+  const wrapper = mount(MyComponent, {
+    global: {
+      provide: {
+        'my-key': 'some-data'
+      }
+    }
+  })
+
+  expect(wrapper.text()).toBe('some-data')
+})
+```
+
+## Заключение
+
+- тестируйте простые composables без компонентов и `@vue/test-utils`
+- создавайте вспомогательные компоненты для тестирования более сложных composables
+- создавайте вспомогательные компоненты для тестирования ваших компонентов, обеспечивая правильные данные с `provide`
+- используйте `global.provide` для передачи данных в ваш компонент, который использует `inject`
\ No newline at end of file

From 09f24a1aa09c6f9e35e1202c746eb960d94b8326 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Fri, 3 Jan 2025 11:37:08 +0300
Subject: [PATCH 11/38] add `testing v-model` page

---
 docs/ru/guide/advanced/v-model.md | 98 +++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 docs/ru/guide/advanced/v-model.md

diff --git a/docs/ru/guide/advanced/v-model.md b/docs/ru/guide/advanced/v-model.md
new file mode 100644
index 000000000..40ac61b5b
--- /dev/null
+++ b/docs/ru/guide/advanced/v-model.md
@@ -0,0 +1,98 @@
+# Тестирование `v-model`
+
+При написании компонентов, которые полагаются на `v-model` взаимодействие (`update:modelValue` событие), вам нужно обработать `event` и `props`.
+
+Ознакомьтесь с ["vmodel integration" Discussion](https://github.com/vuejs/test-utils/discussions/279) для некоторых решений от сообщества.
+
+Ознакомьтесь с [VueJS VModel event documentation](https://vuejs.org/guide/components/events.html#usage-with-v-model).
+
+## Простой пример
+
+Ниже простой Editor компонент:
+
+```js
+const Editor = {
+  props: {
+    label: String,
+    modelValue: String
+  },
+  emits: ['update:modelValue'],
+  template: `<div>
+    <label>{{label}}</label>
+    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
+  </div>`
+}
+```
+
+Этот компонент будет просто вести себя как входной компонент:
+
+```js
+const App = {
+  components: {
+    Editor
+  },
+  template: `<editor v-model="text" label="test" />`,
+  data(){
+    return {
+      text: 'test'
+    }
+  }
+}
+```
+
+Теперь, когда мы вводим что-либо в input, он обновит `text` в вашем компоненте.
+
+Для тестирования этого поведения:
+
+```js
+test('modelValue should be updated', async () => {
+  const wrapper = mount(Editor, {
+    props: {
+      modelValue: 'initialText',
+      'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+    }
+  })
+
+  await wrapper.find('input').setValue('test')
+  expect(wrapper.props('modelValue')).toBe('test')
+})
+```
+
+# Множественный `v-model`
+
+В некоторых случаях мы можем иметь несколько `v-model`, нацеленных на определенные свойства.
+
+Пример с Money Editor мы можем иметь `currency` и `modelValue` свойства.
+
+```js
+const MoneyEditor = {
+  template: `<div> 
+    <input :value="currency" @input="$emit('update:currency', $event.target.value)"/>
+    <input :value="modelValue" type="number" @input="$emit('update:modelValue', $event.target.value)"/>
+  </div>`,
+  props: ['currency', 'modelValue'],
+  emits: ['update:currency', 'update:modelValue']
+}
+```
+
+Мы можем протестировать их обоих:
+
+```js
+test('modelValue and currency should be updated', async () => {
+  const wrapper = mount(MoneyEditor, {
+    props: {
+      modelValue: 'initialText',
+      'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+      currency: '$',
+      'onUpdate:currency': (e) => wrapper.setProps({ currency: e })
+    }
+  })
+
+  const [currencyInput, modelValueInput] = wrapper.findAll('input')
+  await modelValueInput.setValue('test')
+  await currencyInput.setValue('£')
+
+  expect(wrapper.props('modelValue')).toBe('test')
+  expect(wrapper.props('currency')).toBe('£')
+})
+```

From 935bd04257befeedf1a0ee2a168398970d50ed1d Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Mon, 6 Jan 2025 18:39:26 +0300
Subject: [PATCH 12/38] add `vuex` page

---
 docs/ru/guide/advanced/v-model.md |   2 +-
 docs/ru/guide/advanced/vuex.md    | 295 ++++++++++++++++++++++++++++++
 2 files changed, 296 insertions(+), 1 deletion(-)
 create mode 100644 docs/ru/guide/advanced/vuex.md

diff --git a/docs/ru/guide/advanced/v-model.md b/docs/ru/guide/advanced/v-model.md
index 40ac61b5b..5acc52f5d 100644
--- a/docs/ru/guide/advanced/v-model.md
+++ b/docs/ru/guide/advanced/v-model.md
@@ -58,7 +58,7 @@ test('modelValue should be updated', async () => {
 })
 ```
 
-# Множественный `v-model`
+## Множественный `v-model`
 
 В некоторых случаях мы можем иметь несколько `v-model`, нацеленных на определенные свойства.
 
diff --git a/docs/ru/guide/advanced/vuex.md b/docs/ru/guide/advanced/vuex.md
new file mode 100644
index 000000000..edbc6dec8
--- /dev/null
+++ b/docs/ru/guide/advanced/vuex.md
@@ -0,0 +1,295 @@
+# Тестирование Vuex
+
+Vuex - это всего лишь деталь реализации; для тестирования компонентов с помощью Vuex не требуется специальной обработки. Тем не менее, существуют некоторые технологии, которые помогут облегчить чтение и запись ваших тестов. Мы посмотрим на них здесь.
+
+Это руководство предполагает, что вы знакомы с Vuex. Vuex 4 - это версия, которая работает с Vue.js 3. Прочитайте документацию [здесь](https://next.vuex.vuejs.org/).
+
+## Простой пример
+
+Здесь простое Vuex хранилище и компонент, который использует Vuex хранилище
+
+```js
+import { createStore } from 'vuex'
+
+const store = createStore({
+  state() {
+    return {
+      count: 0
+    }
+  },
+  mutations: {
+    increment(state: any) {
+      state.count += 1
+    }
+  }
+})
+```
+
+Хранилище просто сохраняет количество, увеличивая его, когда `increment` мутация выполняется. Это компонент, который мы будем тестировать:
+
+```js
+const App = {
+  template: `
+    <div>
+      <button @click="increment" />
+      Count: {{ count }}
+    </div>
+  `,
+  computed: {
+    count() {
+      return this.$store.state.count
+    }
+  },
+  methods: {
+    increment() {
+      this.$store.commit('increment')
+    }
+  }
+}
+```
+
+## Тестирование с настоящим Vuex хранилищем
+
+Чтобы полностью протестировать, что этот компонент и Vuex хранилище работают, мы нажмем на `<button>` и проверим, что количество увеличивается. В ваших Vue приложениях, обычно в `main.js`, вы устанавливаете Vuex примерно так:
+
+```js
+const app = createApp(App)
+app.use(store)
+```
+
+Это связано с тем, что Vuex - это плагин. А плагины подключаются путем вызова `app.use`.
+
+Vue Test Utils также позволяет вам установить плагины, используя `global.plugins` опцию в `mount`.
+
+```js
+import { createStore } from 'vuex'
+
+const store = createStore({
+  state() {
+    return {
+      count: 0
+    }
+  },
+  mutations: {
+    increment(state: any) {
+      state.count += 1
+    }
+  }
+})
+
+test('vuex', async () => {
+  const wrapper = mount(App, {
+    global: {
+      plugins: [store]
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+После установки плагина мы используем `trigger` для нажатия на кнопку и проверки того, что `count` увеличивается. Это тип теста, который покрывает взаимодействие между различными системами (в данном случае, компонент и хранилище), известный как интеграционный тест.
+
+## Тестирования с имитацией хранилища
+
+Напротив, юнит тест может изолировать и протестировать компонент и хранилище отдельно. Это может быть полезным, если у вас очень большое приложение со сложным хранилищем. Для такого варианта вы можете имитировать части хранилища, в которых вы заинтересованы, используя `global.mocks`:
+
+```js
+test('vuex using a mock store', async () => {
+  const $store = {
+    state: {
+      count: 25
+    },
+    commit: jest.fn()
+  }
+
+  const wrapper = mount(App, {
+    global: {
+      mocks: {
+        $store
+      }
+    }
+  })
+
+  expect(wrapper.html()).toContain('Count: 25')
+  await wrapper.find('button').trigger('click')
+  expect($store.commit).toHaveBeenCalled()
+})
+```
+
+Вместо использования настоящего Vuex хранилища и установки его через `global.plugins`, мы создали наше собственное имитированное хранилище, реализуя только те части Vuex, которые используются в компоненте (в данном случае, `state` и `commit` функции).
+
+Хотя это может показаться удобным для тестирования хранилища в изоляции, обратите внимание, что это не даст вам предупреждений, если вы сломаете ваше Vuex хранилище. Рассматривайте с осторожностью, если вы хотите имитировать Vuex хранилище, либо используйте настоящий и учитывайте компромиссы.
+
+## Тестирование Vuex в изоляции
+
+Вы, возможно, захотите протестировать ваши Vuex мутации или действия в полной изоляции, особенно если они сложные. Для этого вам не нужен Vue Test Utils, поскольку Vuex хранилище - это всего лишь обычный Javascript. Ниже показано, как можно протестировать `increment` мутацию без Vue Test Utils:
+
+```js
+test('increment mutation', () => {
+  const store = createStore({
+    state: {
+      count: 0
+    },
+    mutations: {
+      increment(state) {
+        state.count += 1
+      }
+    }
+  })
+
+  store.commit('increment')
+
+  expect(store.state.count).toBe(1)
+})
+```
+
+## Предустановка Vuex состояния
+
+Иногда может быть полезным иметь Vuex хранилище в определенном состоянии для тестирования. Одна полезная техника, которую ты можешь использовать, кроме как `global.mocks`, - это создать функцию, которая оборачивает `createStore` и принимать аргумент для начального состояния. В данном примере мы расширяем `increment`, чтобы взять дополнительный аргумент, который будет добавлен к `state.count`. Если он не указан, то мы просто увеличиваем `state.count` на 1.
+
+```js
+const createVuexStore = (initialState) =>
+  createStore({
+    state: {
+      count: 0,
+      ...initialState
+    },
+    mutations: {
+      increment(state, value = 1) {
+        state.count += value
+      }
+    }
+  })
+
+test('increment mutation without passing a value', () => {
+  const store = createVuexStore({ count: 20 })
+  store.commit('increment')
+  expect(store.state.count).toBe(21)
+})
+
+test('increment mutation with a value', () => {
+  const store = createVuexStore({ count: -10 })
+  store.commit('increment', 15)
+  expect(store.state.count).toBe(5)
+})
+```
+
+При помощи создания `createVuexStore` функции, которая принимает начальное состояния, мы можем легко установить начальное состояние. Это позволяет нам протестировать все пограничные варианты, но упростить наши тесты.
+
+[Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/testing-vuex.html) имеет больше примеров для тестирования Vuex. Обратите внимание: примеры относятся к Vue.js 2 и Vue Test Utils v1. Идеи и концепты те же самые, и Vue Testing Handbook будет обновлена для Vue.js 3 и Vue Test Utils 2 в ближайшем будущем.
+
+## Тестирование с использованием Composition API
+
+Vuex доступен через `useStore` функцию при использовании Composition API. [Прочитайте подробнее об этом здесь](https://next.vuex.vuejs.org/guide/composition-api.html).
+
+`useStore` может использоваться с необязательным или уникальным ключом внедрения, как обсуждалось [в Vuex документации](https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function).
+
+Это выглядит примерно так:
+
+```js
+import { createStore } from 'vuex'
+import { createApp } from 'vue'
+
+// создать глобально уникальный символ для ключа внедрения
+const key = Symbol()
+
+const App = {
+  setup () {
+    // используйте уникальный ключ для получения доступа к хранилищу
+    const store = useStore(key)
+  }
+}
+
+const store = createStore({ /* ... */ })
+const app = createApp({ /* ... */ })
+
+// укажите ключ как второй аргумент при вызове app.use(store)
+app.use(store, key)
+```
+
+Для избежания повтора передачи параметра ключа, когда `useStore` используется, Vuex документация рекомендует вынесение этой логики в вспомогательную функцию и переиспользовать эту функцию вместо стандартной `useStore` функции. [Прочитайте подробнее об этом здесь](https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function). Подход, предоставляющий хранилище с использованием Vue Test Utils, зависит от способа использования `useStore` функции в компоненте.
+
+### Тестирование компонентов, использующий `useStore` без ключа внедрения
+
+Без ключа внедрения данные хранилища могут быть просто вставлены в компонент через глобальную `provide` опцию в `mount`. Название внедряемого хранилища должно быть таким же, как название в компоненте т.е. "store". 
+
+#### Пример `useStore` без ключа
+
+```js
+import { createStore } from 'vuex'
+
+const store = createStore({
+  // ...
+})
+
+const wrapper = mount(App, {
+  global: {
+    provide: {
+      store: store
+    },
+  },
+})
+```
+
+### Тестирование компонентов, использующий `useStore` с ключом внедрения
+
+При использовании хранилища с ключом внедрения предыдущий подход не будет работать. Экземпляр хранилища не будет возвращаться из `useStore`. Для того, чтобы получить доступ к нужному хранилищу, идентификатор должен быть передан.
+
+Это должен быть тот же самый ключ, которые передается в `useStore` в `setup` функции компонента или в `useStore` внутри вспомогательной функции. Поскольку JavaScript символы уникальны и не могут быть созданы снова, лучше всего экспортировать ключ из настоящего хранилища.
+
+Вы можете либо использовать `global.provide` с корректным ключом или `global.plugins` установить хранилище и указать ключ:
+
+#### Используя `useStore` с ключом в `global.provide`
+
+```js
+// store.js
+export const key = Symbol()
+```
+
+```js
+// app.spec.js
+import { createStore } from 'vuex'
+import { key } from './store'
+
+const store = createStore({ /* ... */ })
+
+const wrapper = mount(App, {
+  global: {
+    provide: {
+      [key]: store
+    },
+  },
+})
+```
+
+#### Используя `useStore` с ключом в `global.plugins`
+
+```js
+// store.js
+export const key = Symbol()
+```
+
+```js
+// app.spec.js
+import { createStore } from 'vuex'
+import { key } from './store'
+
+const store = createStore({ /* ... */ })
+
+const wrapper = mount(App, {
+  global: {
+    // чтобы передать параметры в плагины, используйте синтаксис массива
+    plugins: [[store, key]]
+  },
+})
+```
+
+## Заключение
+
+- Используйте `global.plugins` для установки Vuex как плагина
+- Используйте `global.mocks` для имитации глобального объекта, таких как Vuex, для продвинутых случаев использования
+- Рассмотрите тестирование сложных Vuex мутаций и действий в изоляции
+- Оберните `createStore` при помощи функции, которая принимает аргумент для установки определенных сценариев в тестах

From 56b7334bb293c3244299a05fbd0547564a3c62da Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Tue, 7 Jan 2025 12:05:34 +0300
Subject: [PATCH 13/38] add `teleport` page

---
 docs/ru/guide/advanced/teleport.md | 210 +++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 docs/ru/guide/advanced/teleport.md

diff --git a/docs/ru/guide/advanced/teleport.md b/docs/ru/guide/advanced/teleport.md
new file mode 100644
index 000000000..7f658bcbf
--- /dev/null
+++ b/docs/ru/guide/advanced/teleport.md
@@ -0,0 +1,210 @@
+# Тестирование Teleport
+
+Vue 3 предоставляет новый встроенный компонент: `<Teleport>`, который позволяет компонентам "телепортировать" их содержимое далеко за пределы их собственного `<template>`. Большинство тестов, написанные при помощи Vue Test Utils, ограничены компонентом, переданным в `mount`, который привносит некоторую сложность, когда нужно протестировать компонент, который телепортирован за пределы компонента, где он был изначально отрисован.
+
+Вот несколько стратегий и техник для тестирования компонентов, используя `<Teleport>`.
+
+::: tip
+Если вы хотите протестировать остальную часть вашего компонента, игнорируя `teleport`, вы можете поставить заглушку на `teleport`, передав `teleport: true` в [global stubs option](../../api/#global-stubs).
+:::
+
+## Пример
+
+В этом примере мы тестируем `<Navbar>` компонент. Он отрисовывает `<Signup>` компонент внутри `<Teleport>`. `target` атрибут `<Teleport>` - это элемент, расположенный за пределами `<Navbar>` компонента.
+
+Это `Navbar.vue` компонент:
+
+```vue
+<template>
+  <Teleport to="#modal">
+    <Signup />
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Signup from './Signup.vue'
+
+export default defineComponent({
+  components: {
+    Signup
+  }
+})
+</script>
+```
+
+Он просто телепортирует `<Signup>` в другое место. Для целей нашего примера это просто.
+
+`Signup.vue` - это форма, которая проверяет, содержит ли `username` больше чем 8 символов. Если да, то когда форма отправлена, генерируется `signup` событие с `username` в качестве параметра. Протестировать это будет нашей целью.
+
+```vue
+<template>
+  <div>
+    <form @submit.prevent="submit">
+      <input v-model="username" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ['signup'],
+  data() {
+    return {
+      username: ''
+    }
+  },
+  computed: {
+    error() {
+      return this.username.length < 8
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.error) {
+        this.$emit('signup', this.username)
+      }
+    }
+  }
+}
+</script>
+```
+
+## Создание компонента
+
+Начнем с простого теста:
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+test('emits a signup event when valid', async () => {
+  const wrapper = mount(Navbar)
+})
+```
+
+Запуск этого теста выдаст вам предупреждение: `[Vue warn]: Failed to locate Teleport target with selector "#modal"`. Давайте создадим его:
+
+```ts {5-15}
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+beforeEach(() => {
+  // создать teleport target
+  const el = document.createElement('div')
+  el.id = 'modal'
+  document.body.appendChild(el)
+})
+
+afterEach(() => {
+  // очистить
+  document.body.innerHTML = ''
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+})
+```
+
+Мы используем Jest для этого примера, который не сбрасывает DOM каждый тест. По этой причине желательно очищать DOM после каждого теста при помощи `afterEach`.
+
+## Взаимодействие с телепортированным компонентом
+
+Следующая вещь, которую мы должны сделать, - это заполнить пользовательский input. К несчастью, мы не можем использовать `wrapper.find('input')`. Почему нет? Быстрый `console.log(wrapper.html())` покажет нам:
+
+```html
+<!--teleport start-->
+<!--teleport end-->
+```
+
+Мы видим несколько комментариев, используемых Vue для обработки `<Teleport>`, но без `<input>`. Поскольку `<Signup>` компонент (и его HTML) не отрисован внутри `<Navbar>` где-либо, он был телепортирован за пределы компонента.
+
+Хотя фактический HTML был телепортирован за пределы, оказывается, что Virtual DOM, связанный с `<Navbar>`, поддерживает ссылку на оригинальный компонент. Это значит, что вы можете использовать `getComponent` и `findComponent`, которые работают с Virtual DOM, но не с обычным DOM.
+
+```ts {12}
+beforeEach(() => {
+  // ...
+})
+
+afterEach(() => {
+  // ...
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  wrapper.getComponent(Signup) // получен!
+})
+```
+
+`getComponent` вернет `VueWrapper`. Теперь вы можете использовать методы такие как `get`, `find` и `trigger`.
+
+Давайте закончим тест:
+
+```ts {4-8}
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  const signup = wrapper.getComponent(Signup)
+  await signup.get('input').setValue('valid_username')
+  await signup.get('form').trigger('submit.prevent')
+
+  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
+})
+```
+
+Он пройден!
+
+Полный тест:
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+beforeEach(() => {
+  // создать teleport target
+  const el = document.createElement('div')
+  el.id = 'modal'
+  document.body.appendChild(el)
+})
+
+afterEach(() => {
+  // очистить
+  document.body.innerHTML = ''
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  const signup = wrapper.getComponent(Signup)
+  await signup.get('input').setValue('valid_username')
+  await signup.get('form').trigger('submit.prevent')
+
+  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
+})
+```
+
+Вы можете заглушить `teleport`, используя `teleport: true`:
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar, {
+    global: {
+      stubs: {
+        teleport: true
+      }
+    }
+  })
+})
+```
+
+## Заключение
+
+- Создайте элемент для телепортирования при помощи `document.createElement`.
+- Найдите телепортированные компоненты при помощи `getComponent` или `findComponent`, которые работают с Virtual DOM уровнем.

From 13c373e65abed873fddab28d2a5d27eea94009bd Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Thu, 9 Jan 2025 13:46:41 +0300
Subject: [PATCH 14/38] add `vue-router` page

---
 docs/ru/guide/advanced/teleport.md   |   2 +-
 docs/ru/guide/advanced/vue-router.md | 496 +++++++++++++++++++++++++++
 2 files changed, 497 insertions(+), 1 deletion(-)
 create mode 100644 docs/ru/guide/advanced/vue-router.md

diff --git a/docs/ru/guide/advanced/teleport.md b/docs/ru/guide/advanced/teleport.md
index 7f658bcbf..7a4310cd8 100644
--- a/docs/ru/guide/advanced/teleport.md
+++ b/docs/ru/guide/advanced/teleport.md
@@ -207,4 +207,4 @@ test('teleport', async () => {
 ## Заключение
 
 - Создайте элемент для телепортирования при помощи `document.createElement`.
-- Найдите телепортированные компоненты при помощи `getComponent` или `findComponent`, которые работают с Virtual DOM уровнем.
+- Найдите телепортированные компоненты при помощи `getComponent` или `findComponent`, которые работают с Virtual DOM.
diff --git a/docs/ru/guide/advanced/vue-router.md b/docs/ru/guide/advanced/vue-router.md
new file mode 100644
index 000000000..89831dde5
--- /dev/null
+++ b/docs/ru/guide/advanced/vue-router.md
@@ -0,0 +1,496 @@
+# Тестирование Vue Router
+
+В этой статье будут представлены два пути для тестирования приложения, используя Vue Router:
+
+1. Используя настоящий Vue Router, который максимально приближен к реальности, но также может добавить сложности при тестировании больших приложений.
+2. Использование имитированного роутера позволяет более точно управлять средой тестирования.
+
+Обратите внимание, что Vue Test Utils не предоставляет какие-либо специальные функции для помощи в тестировании компонентов, которые полагаются на Vue Router.
+
+## Использование имитированного роутера
+
+Вы можете использовать имитированный роутер, чтобы не заботиться о деталях реализации Vue Router в ваших юнит тестах.
+
+Вместо использования настоящего Vue Router экземпляра, мы можем создать имитированную версию, которая будет реализовывать только те возможности, которые нам нужны. Мы можем сделать это, используя комбинацию `jest.mock` (если вы используете Jest) и `global.components`.
+
+Когда мы имитируем зависимости, обычно так происходит, потому что **мы не заинтересованы в тестировании их поведения**. Мы не хотим тестировать нажатие на `<router-link>`, который отправляет на нужную страницу, конечно, это произойдет. Однако, мы можем быть заинтересованными в том, чтобы убедиться, что `<a>` имеет верный `to` атрибут.
+
+Давайте посмотрим на более реалистичный пример! Этот компонент показывает кнопку, которая перенаправит авторизованного пользователя на страницу редактирования поста (основанного на текущих параметрах роута). Неавторизованный пользователь должен быть перенаправлен на `/404` роут.
+
+```js
+const Component = {
+  template: `<button @click="redirect">Click to Edit</button>`,
+  props: ['isAuthenticated'],
+  methods: {
+    redirect() {
+      if (this.isAuthenticated) {
+        this.$router.push(`/posts/${this.$route.params.id}/edit`)
+      } else {
+        this.$router.push('/404')
+      }
+    }
+  }
+}
+```
+
+Мы могли бы использовать настоящий роутер, после отправить на правильный роут для этого компонента, далее после нажатия на кнопку проверить, что нужная страница была отрисована... однако, это большое количество настроек для относительно простого теста. По своей сути тест, который мы хотим написать, должен быть "если авторизован, перенаправить на X, иначе перенаправить на Y". Давайте посмотрим, как мы могли бы достичь этого при помощи имитации роутера, используя `global.mocks` свойство:
+
+```js
+import { mount } from '@vue/test-utils';
+
+test('allows authenticated user to edit a post', async () => {
+  const mockRoute = {
+    params: {
+      id: 1
+    }
+  }
+  const mockRouter = {
+    push: jest.fn()
+  }
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: true
+    },
+    global: {
+      mocks: {
+        $route: mockRoute,
+        $router: mockRouter
+      }
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(mockRouter.push).toHaveBeenCalledTimes(1)
+  expect(mockRouter.push).toHaveBeenCalledWith('/posts/1/edit')
+})
+
+test('redirect an unauthenticated user to 404', async () => {
+  const mockRoute = {
+    params: {
+      id: 1
+    }
+  }
+  const mockRouter = {
+    push: jest.fn()
+  }
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: false
+    },
+    global: {
+      mocks: {
+        $route: mockRoute,
+        $router: mockRouter
+      }
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(mockRouter.push).toHaveBeenCalledTimes(1)
+  expect(mockRouter.push).toHaveBeenCalledWith('/404')
+})
+```
+
+Мы использовали `global.mocks`, чтобы предоставить необходимые зависимости (`this.$route` и `this.$router`) для установки нужного состояния для каждого теста.
+
+Затем мы смогли использовать `jest.fn()` для отслеживания, сколько раз и с какими аргументами вызывался `this.$router.push`. Самое приятное, нам не нужно было иметь дело с сложностью и особенностями Vue Router в наших тестах! Мы занимались только тестированием логики приложения.
+
+:::tip
+Вы можете захотеть протестировать всю систему в подходе end-to-end. Вы можете рассмотреть, фреймворк такой как [Cypress](https://www.cypress.io/) для полных системных тестов, использующих реальный браузер.
+:::
+
+## Использование настоящего роутера
+
+Сейчас мы увидели, как использовать имитированный роутер, давайте посмотрим на использование настоящего Vue Router.
+
+Давайте создадим простое приложение для постов, который использует Vue Router. Посты перечислены на `/posts` роуте:
+
+```js
+const App = {
+  template: `
+    <router-link to="/posts">Go to posts</router-link>
+    <router-view />
+  `
+}
+
+const Posts = {
+  template: `
+    <h1>Posts</h1>
+    <ul>
+      <li v-for="post in posts" :key="post.id">
+        {{ post.name }}
+      </li>
+    </ul>
+  `,
+  data() {
+    return {
+      posts: [{ id: 1, name: 'Testing Vue Router' }]
+    }
+  }
+}
+```
+
+Корень приложения отображает `<router-link>`, ведущая на `/posts`, где мы перечисляем посты.
+
+Настоящий роутер выглядит примерно так. Обратите внимание, что мы экспортируем роуты отдельно от роутера, чтобы позднее мы могли добавить новый роутер для каждого теста.
+
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: {
+      template: 'Welcome to the blogging app'
+    }
+  },
+  {
+    path: '/posts',
+    component: Posts
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes,
+})
+
+export { routes };
+
+export default router;
+```
+
+Лучший способ проиллюстрировать, как протестировать приложение, используя Vue Router, - это позволить предупреждениям направить нас. Следующего минимального теста достаточно, чтобы заставить нас идти дальше:
+
+```js
+import { mount } from '@vue/test-utils'
+
+test('routing', () => {
+  const wrapper = mount(App)
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+})
+```
+
+Тест провален. Он также печатает два предупреждения:
+
+```bash
+console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
+  [Vue warn]: Failed to resolve component: router-link
+
+console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
+  [Vue warn]: Failed to resolve component: router-view
+```
+
+`<router-link>` и `<router-view>` компоненты не найдены. Нам нужно установить Vue Router! Поскольку Vue Router - это плагин, мы установим его, используя `global.plugins` опцию в `mount`:
+
+```js {12,13,14}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from "@/router" // Этот импорт должен ссылаться на ваш файл роутов, описанных выше
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes,
+})
+
+test('routing', () => {
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+})
+```
+
+Те два предупреждения теперь исчезли, но теперь мы имеет другие предупреждения:
+
+```js
+console.warn node_modules/vue-router/dist/vue-router.cjs.js:225
+  [Vue Router warn]: Unexpected error when starting the router: TypeError: Cannot read property '_history' of null
+```
+
+Хотя не совсем понятны предупреждения, это как-то связано с тем фактом, что **Vue Router 4 работает с роутами асинхронно**.
+
+Vue Router предоставляет `isReady` функцию, которая говорит нам, когда роутер готов. Затем мы можем использовать `await`, чтобы убедиться в том, что начальная навигация произошла.
+
+```js {13,14}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from "@/router"
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes,
+})
+
+test('routing', async () => {
+  router.push('/')
+
+  // После этой строчки роутер готов
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+})
+```
+
+Тест пройден! Это потребовало немало усилий, но теперь мы убедились, что приложение правильно переходит с первоначальному роуту.
+
+Давайте перейдем в `/posts` и убедимся, что маршрутизация работает, как ожидается:
+
+```js {21,22}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from "@/router"
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes,
+})
+
+test('routing', async () => {
+  router.push('/')
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+
+  await wrapper.find('a').trigger('click')
+  expect(wrapper.html()).toContain('Testing Vue Router')
+})
+```
+
+Снова, еще одна загадочная ошибка:
+
+```js
+console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
+  [Vue warn]: Unhandled error during execution of native event handler
+    at <RouterLink to="/posts" >
+
+console.error node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:211
+  TypeError: Cannot read property '_history' of null
+```
+
+Снова благодаря асинхронному поведению в Vue Router 4 нам нужно подождать завершение маршрутизации до продолжения теста.
+
+В данном случае, однако, нет _hasNavigated_ хука, который мы могли бы ожидать. Одна из альтернатив - это использование `flushPromises` функции, предоставляемая Vue Test Utils:
+
+```js {1,22}
+import { mount, flushPromises } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from "@/router"
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes,
+})
+
+test('routing', async () => {
+  router.push('/')
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+
+  await wrapper.find('a').trigger('click')
+  await flushPromises()
+  expect(wrapper.html()).toContain('Testing Vue Router')
+})
+```
+
+Тест _наконец-то_ проходит. Великолепно! Однако все это делается вручную для крошечного небольшого приложения. Вот в чем причина использования имитированного роутера - это распространенный подход при тестировании Vue компонентов, используя Vue Test Utils. В этой случае, если ты предпочитаешь использовать настоящий роутер, держите в уме, что каждый тест должен использовать его собственный экземпляр роутера следующим образом:
+
+```js {1,19}
+import { mount, flushPromises } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from "@/router"
+
+let router;
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  })
+});
+
+test('routing', async () => {
+  router.push('/')
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+
+  await wrapper.find('a').trigger('click')
+  await flushPromises()
+  expect(wrapper.html()).toContain('Testing Vue Router')
+})
+```
+
+## Использование имитированного роутера с Composition API
+
+Vue router 4 позволяет работать с роутером и роутами внутри `setup` функции вместе с composition API.
+
+Рассмотрим тот же демо компонент, переписанный, используя composition API.
+
+```js
+import { useRouter, useRoute } from 'vue-router'
+
+const Component = {
+  template: `<button @click="redirect">Click to Edit</button>`,
+  props: ['isAuthenticated'],
+  setup (props) {
+    const router = useRouter()
+    const route = useRoute()
+
+    const redirect = () => {
+      if (props.isAuthenticated) {
+        router.push(`/posts/${route.params.id}/edit`)
+      } else {
+        router.push('/404')
+      }
+    }
+
+    return {
+      redirect
+    }
+  }
+}
+```
+
+В этот раз для того, чтобы протестировать компонент, мы будем использовать jest функцию для имитирования импортированных ресурсов (`vue-router`) и имитировать роутер и роуты напрямую.
+
+```js
+import { useRouter, useRoute } from 'vue-router'
+
+jest.mock('vue-router', () => ({
+  useRoute: jest.fn(),
+  useRouter: jest.fn(() => ({
+    push: () => {}
+  }))
+}))
+
+test('allows authenticated user to edit a post', () => {
+  useRoute.mockImplementationOnce(() => ({
+    params: {
+      id: 1
+    }
+  }))
+
+  const push = jest.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: true
+    },
+    global: {
+      stubs: ["router-link", "router-view"], // Заглушки для router-link и router-view в случае, если они будут отрисованы в вашем шаблоне
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(push).toHaveBeenCalledTimes(1)
+  expect(push).toHaveBeenCalledWith('/posts/1/edit')
+})
+
+test('redirect an unauthenticated user to 404', () => {
+  useRoute.mockImplementationOnce(() => ({
+    params: {
+      id: 1
+    }
+  }))
+
+  const push = jest.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: false
+    }
+    global: {
+      stubs: ["router-link", "router-view"], // Заглушки для router-link и router-view в случае, если они будут отрисованы в вашем шаблоне
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(push).toHaveBeenCalledTimes(1)
+  expect(push).toHaveBeenCalledWith('/404')
+})
+```
+
+## Использование настоящего роутера с Composition API
+
+Использование настоящего роутера с Composition API работает точно так же, как настоящий роутер с Options API. Держите в голове, что, также как в случае с Options API, 
+считается хорошей практикой создавать новый экземпляр объекта роутера для каждого теста вместо импортирования роутера напрямую из вашего приложения.
+
+```js
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from "@/router"
+
+let router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  })
+
+  router.push('/')
+  await router.isReady()
+});
+
+test('allows authenticated user to edit a post', async () => {
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: true
+    },
+    global: {
+      plugins: [router],
+    }
+  })
+
+  const push = jest.spyOn(router, 'push')
+  await wrapper.find('button').trigger('click')
+
+  expect(push).toHaveBeenCalledTimes(1)
+  expect(push).toHaveBeenCalledWith('/posts/1/edit')
+})
+```
+
+Для тех, кто предпочитает автоматический подход, библиотека [vue-router-mock](https://github.com/posva/vue-router-mock), созданная Posva, также доступна как альтернатива.
+
+## Заключение
+
+- Вы можете использовать настоящий экземпляр роутера в ваших тестах.
+- Хотя есть некоторые особенности: Vue Router 4 является асинхронным, и нам нужно принять это во внимание при написании тестов.
+- Для более сложных приложений рассмотрите имитацию зависимостей роутера и сфокусируйтесь на тестировании внутренней логики.
+- Используйте возможность имитации и заглушки вашей программы тестирования, где это возможно.
+- Используйте `global.mocks` для имитации глобальных зависимостей, таких как `this.$route` и `this.$router`.

From b01d5fd3423076a62833d0f8150b8eb2549156f6 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Fri, 10 Jan 2025 12:19:20 +0300
Subject: [PATCH 15/38] add `ssr` page

---
 docs/ru/guide/advanced/ssr.md | 41 +++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 docs/ru/guide/advanced/ssr.md

diff --git a/docs/ru/guide/advanced/ssr.md b/docs/ru/guide/advanced/ssr.md
new file mode 100644
index 000000000..4538d9eb1
--- /dev/null
+++ b/docs/ru/guide/advanced/ssr.md
@@ -0,0 +1,41 @@
+# Тестирование Server-side Rendering
+
+Vue Test Utils предоставляет `renderToString` для тестирования Vue приложений, которые используют server-side rendering (SSR).
+Это руководство проведет тебя через процесс тестирования Vue приложений, которые используют SSR.
+
+## `renderToString`
+
+`renderToString` - это функция, которая преобразует Vue компонент к строке.
+Это асинхронная функция, которая возвращает Promise, и принимает те же параметры, как и `mount` или `shallowMount`.
+
+Давайте рассмотрим простой компонент, который использует `onServerPrefetch` хук:
+
+```ts
+function fakeFetch(text: string) {
+  return Promise.resolve(text)
+}
+
+const Component = defineComponent({
+  template: '<div>{{ text }}</div>',
+  setup() {
+    const text = ref<string | null>(null)
+
+    onServerPrefetch(async () => {
+      text.value = await fakeFetch('onServerPrefetch')
+    })
+
+    return { text }
+  }
+})
+```
+
+Вы можете написать тест для этого компонента, используя `renderToString`:
+
+```ts
+import { renderToString } from '@vue/test-utils'
+
+it('renders the value returned by onServerPrefetch', async () => {
+  const contents = await renderToString(Component)
+  expect(contents).toBe('<div>onServerPrefetch</div>')
+})
+```

From f5609af6e828922167607ac09317a019fdf4601d Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Tue, 14 Jan 2025 13:17:20 +0300
Subject: [PATCH 16/38] add `stubs and shallow mount` page

---
 docs/.vitepress/config/ru.mts                 |   2 +-
 docs/ru/guide/advanced/slots.md               |   6 +-
 docs/ru/guide/advanced/stubs-shallow-mount.md | 391 ++++++++++++++++++
 docs/ru/guide/advanced/vue-router.md          |   2 +-
 docs/ru/guide/advanced/vuex.md                |   4 +-
 .../guide/essentials/conditional-rendering.md |   6 +-
 docs/ru/guide/essentials/passing-data.md      |   6 +-
 7 files changed, 404 insertions(+), 13 deletions(-)
 create mode 100644 docs/ru/guide/advanced/stubs-shallow-mount.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index 445a0e185..bcb5ddbe2 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -91,7 +91,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
             { text: 'Тестирование Vue Router', link: '/ru/guide/advanced/vue-router' },
             { text: 'Тестирование Teleport', link: '/ru/guide/advanced/teleport' },
             {
-              text: 'Stubs and Shallow Mount',
+              text: 'Заглушки и неглубокий Mount',
               link: '/ru/guide/advanced/stubs-shallow-mount'
             },
             {
diff --git a/docs/ru/guide/advanced/slots.md b/docs/ru/guide/advanced/slots.md
index 7dbff8f74..1b291ac09 100644
--- a/docs/ru/guide/advanced/slots.md
+++ b/docs/ru/guide/advanced/slots.md
@@ -22,7 +22,7 @@ const Layout = {
 }
 ```
 
-Возможно, вы хотите написать тест, чтобы убедиться в том, что содержимое слота по умолчанию отрисовано. VTU предоставляет `slots` опцию в `mount` для этой цели:
+Возможно, вы хотите написать тест, чтобы убедиться в том, что содержимое слота по умолчанию отрисовано. VTU предоставляет `slots` опцию монтирования для этой цели:
 
 ```js
 test('layout default slot', () => {
@@ -113,7 +113,7 @@ test('layout full page layout', () => {
 
 ## Продвинутое использование
 
-Ты также можешь передать функцию отрисовки, объект с шаблоном или даже SFC, импортированный из `vue` файла, в слот опцию в `mount`:
+Ты также можешь передать функцию отрисовки, объект с шаблоном или даже SFC, импортированный из `vue` файла, в слот опцию монтирования:
 
 ```js
 import { h } from 'vue'
@@ -185,7 +185,7 @@ test('scoped slots', () => {
 
 ## Заключение
 
-- Используйте `slots` опцию в `mount` для тестирования компонента, использующего `slot`, чтобы проверить правильность отрисовки.
+- Используйте `slots` опцию монтирования для тестирования компонента, использующего `slot`, чтобы проверить правильность отрисовки.
 - Содержимое может быть либо строкой, либо функцией рендеринга или импортированным SFC.
 - Используйте `default` для слота по умолчанию и корректное имя для именованных слотов.
 - Слоты с ограниченной областью действия и `#` сокращение также поддерживаются.
diff --git a/docs/ru/guide/advanced/stubs-shallow-mount.md b/docs/ru/guide/advanced/stubs-shallow-mount.md
new file mode 100644
index 000000000..3f6e91227
--- /dev/null
+++ b/docs/ru/guide/advanced/stubs-shallow-mount.md
@@ -0,0 +1,391 @@
+# Заглушки и неглубокий `mount`
+
+Vue Test Utils предоставляет некоторые продвинутые возможности для _заглушивания_ компонентов и директив. _Заглушка_ - это когда вы заменяете существующую реализацию кастомного компонента или директивы на фиктивную, которая не делает вообще ничего, что может помочь упростить сложный тест. Давайте посмотрим на пример:
+
+## Заглушка для одиночного дочернего компонента
+
+Распространенным примером является ситуация, когда вы хотели бы протестировать что-то в компоненте, который находится очень высоко в иерархии компонентов.
+
+В этом примере у нас есть `<App>`, который отрисовывает сообщение, а также  `FetchDataFromApi` компонент, который создает API вызов и отрисовывает его результат.
+
+```js
+const FetchDataFromApi = {
+  name: 'FetchDataFromApi',
+  template: `
+    <div>{{ result }}</div>
+  `,
+  async mounted() {
+    const res = await axios.get('/api/info')
+    this.result = res.data
+  },
+  data() {
+    return {
+      result: ''
+    }
+  }
+}
+
+const App = {
+  components: {
+    FetchDataFromApi
+  },
+  template: `
+    <h1>Welcome to Vue.js 3</h1>
+    <fetch-data-from-api />
+  `
+}
+```
+
+Мы не хотим делать API вызов в этом конкретном тесте, мы лишь хотим проверить, что сообщение отрисовалось. В данном случае мы могли бы использовать `stubs`, который находится `global` в опциях `mount`.
+
+```js
+test('stubs component with custom template', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        FetchDataFromApi: {
+          template: '<span />'
+        }
+      }
+    }
+  })
+
+  console.log(wrapper.html())
+  // <h1>Welcome to Vue.js 3</h1><span></span>
+
+  expect(wrapper.html()).toContain('Welcome to Vue.js 3')
+})
+```
+
+Обратите внимание, что шаблон показывает `<span></span>`, где был `<fetch-data-from-api />`. Мы заменили его при помощи заглушки, в данном случае мы предоставили нашу собственную реализацию, передав его в `template`.
+
+Мы можем также получить стандартную заглушку вместо предоставления нашей собственной:
+
+```js
+test('stubs component', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        FetchDataFromApi: true
+      }
+    }
+  })
+
+  console.log(wrapper.html())
+  /*
+    <h1>Welcome to Vue.js 3</h1>
+    <fetch-data-from-api-stub></fetch-data-from-api-stub>
+  */
+
+  expect(wrapper.html()).toContain('Welcome to Vue.js 3')
+})
+```
+
+Заглушка работает для всех `<FetchDataFromApi />` компонентов во всем дереве компонентов, несмотря на каком уровне они находятся. Вот почему опция находится в опции `global`.
+
+::: tip
+Для заглушки нужно использовать ключ в `components` либо название вашего компонента. Если оба переданы в `global.stubs`, тогда ключ будет использоваться в первую очередь.
+:::
+
+## Заглушка для всех дочерних компонентов
+
+Иногда вы хотите заглушить _все_ кастомные компоненты. Например, вы можете иметь компонент, как этот
+
+```js
+const ComplexComponent = {
+  components: { ComplexA, ComplexB, ComplexC },
+  template: `
+    <h1>Welcome to Vue.js 3</h1>
+    <ComplexA />
+    <ComplexB />
+    <ComplexC />
+  `
+}
+```
+
+Представьте, что каждый из `<Complex>` компонентов делает что-то сложное, и вы заинтересованы только протестировать, что `<h1>` отрисовывает правильно приветствие. Вы могли бы сделать что-то подобное:
+
+```js
+const wrapper = mount(ComplexComponent, {
+  global: {
+    stubs: {
+      ComplexA: true,
+      ComplexB: true,
+      ComplexC: true
+    }
+  }
+})
+```
+
+Это выглядит слишком многословно. VTU имеет `shallow` опцию монтирования, которая автоматически поставит заглушку на все дочерние компоненты:
+
+```js {3}
+test('shallow stubs out all child components', () => {
+  const wrapper = mount(ComplexComponent, {
+    shallow: true
+  })
+
+  console.log(wrapper.html())
+  /*
+    <h1>Welcome to Vue.js 3</h1>
+    <complex-a-stub></complex-a-stub>
+    <complex-b-stub></complex-b-stub>
+    <complex-c-stub></complex-c-stub>
+  */
+})
+```
+
+::: tip
+Если вы использовали VTU V1, вы можете вспомнить это как `shallowMount`. Этот метод все еще доступен - это то же самое, что `shallow: true`.
+:::
+
+## Заглушка для всех дочерних компонентов с исключением
+
+Иногда вам нужно заглушить все кастомные компоненты, _исключая_ определенный. Давайте рассмотрим пример:
+
+```js
+const ComplexA = {
+  template: '<h2>Hello from real component!</h2>'
+}
+
+const ComplexComponent = {
+  components: { ComplexA, ComplexB, ComplexC },
+  template: `
+    <h1>Welcome to Vue.js 3</h1>
+    <ComplexA />
+    <ComplexB />
+    <ComplexC />
+  `
+}
+```
+
+Используя опцию `shallow` монтирования, которая автоматически заглушает все дочерние компоненты. Если мы хотим явно убрать заглушку для компонента, мы могли бы указать его имя в `stubs` со значением, установленным в `false`.  
+
+```js {3}
+test('shallow allows opt-out of stubbing specific component', () => {
+  const wrapper = mount(ComplexComponent, {
+    shallow: true,
+    global: {
+      stubs: { ComplexA: false }
+    }
+  })
+
+  console.log(wrapper.html())
+  /*
+    <h1>Welcome to Vue.js 3</h1>
+    <h2>Hello from real component!</h2>
+    <complex-b-stub></complex-b-stub>
+    <complex-c-stub></complex-c-stub>
+  */
+})
+```
+
+## Заглушка для асинхронного компонента
+
+В случае если вы хотите заглушить асинхронные компонент, тогда существуют два способа. Например, вы можете иметь компоненты, как здесь
+
+```js
+// AsyncComponent.js
+export default defineComponent({
+  name: 'AsyncComponent',
+  template: '<span>AsyncComponent</span>'
+})
+
+// App.js
+const App = defineComponent({
+  components: {
+    MyComponent: defineAsyncComponent(() => import('./AsyncComponent'))
+  },
+  template: '<MyComponent/>'
+})
+```
+
+Первый способ - это использование ключа, указанного в твоем компоненте, который загружает асинхронный компонент. В данном примере мы использовали ключ "MyComponent".
+Не обязательно использовать `async/await` в тесте, потому что компонент был заглушен до выполнения.
+
+```js
+test('stubs async component without resolving', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        MyComponent: true
+      }
+    }
+  })
+
+  expect(wrapper.html()).toBe('<my-component-stub></my-component-stub>')
+})
+```
+
+Второй способ - это использование названия асинхронного компонента. В этом примере мы использовали название "AsyncComponent".
+Теперь обязательно использовать `async/await`, потому что асинхронный компонент необходимо выполнить, и только после будет заглушен по названию, определенному в асинхронном компоненте.
+
+**Убедитесь, что вы указали имя в вашем асинхронном компоненте!**
+
+```js
+test('stubs async component with resolving', async () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        AsyncComponent: true
+      }
+    }
+  })
+
+  await flushPromises()
+
+  expect(wrapper.html()).toBe('<async-component-stub></async-component-stub>')
+})
+```
+
+## Заглушка для директивы
+
+Иногда директивы делают вполне сложные вещи, например, выполняют большое количество DOM манипуляций, которые могут привести к ошибкам в ваших тестах (из-за того, что поведение JSDOM не похоже на поведение DOM). Распространенный пример - это сообщение с подсказкой (tooltip) директива из различных библиотек, которые обычно полагаются в большинстве своем на измерении размера/позиции DOM элементов.
+
+В этом примере у нас есть другой `<App>`, который отрисовывает сообщение при помощи сообщения с подсказкой (tooltip).
+
+```js
+// tooltip директива, определенная где-то с именем `Tooltip`
+
+const App = {
+  directives: {
+    Tooltip
+  },
+  template: '<h1 v-tooltip title="Welcome tooltip">Welcome to Vue.js 3</h1>'
+}
+```
+
+Мы не хотим, чтобы код директивы `Tooltip` выполнялся, мы лишь хотим проверить, что сообщение отрисовалось. В данном случае мы могли бы использовать `stubs`, который находится в опции монтирования `global`, использующий `vTooltip`.
+
+```js
+test('stubs component with custom template', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        vTooltip: true
+      }
+    }
+  })
+
+  console.log(wrapper.html())
+  // <h1>Welcome to Vue.js 3</h1>
+
+  expect(wrapper.html()).toContain('Welcome to Vue.js 3')
+})
+```
+
+::: tip
+Использование `vCustomDirective` схемы наименования, чтобы отличать компоненты и директивы, вдохновлено на [том же подходе](https://vuejs.org/api/sfc-script-setup.html#using-custom-directives), использованного в `<script setup>`
+:::
+
+Иногда нам нужна часть функциональности директивы (обычно, потому что какой-то код полагается на него). Давайте рассмотрим нашу директиву, которая добавляет `with-tooltip` CSS класс, когда выполняется, и это важная часть поведения нашего кода. В данном случае мы можем заменить `true` на нашу фиктивную реализацию директивы.
+
+```js
+test('stubs component with custom template', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        vTooltip: {
+          beforeMount(el: Element) {
+            console.log('directive called')
+            el.classList.add('with-tooltip')
+          }
+        }
+      }
+    }
+  })
+
+  // 'directive called' отправлено в консоль
+
+  console.log(wrapper.html())
+  // <h1 class="with-tooltip">Welcome to Vue.js 3</h1>
+
+  expect(wrapper.classes('with-tooltip')).toBe(true)
+})
+```
+
+Мы только что заменили нашу реализацию директивы на нашу собственную!
+
+::: warning
+Заглушка директив не будет работать с функциональными компонентами или `<script setup>` благодаря отсутствию имени директивы внутри [withDirectives](https://vuejs.org/api/render-function.html#withdirectives) функции. Рассмотрите имитацию модуля директивы через ваш фреймворк тестирования, если вам нужно заглушить директиву, использованную в функциональном компоненте. Посмотрите https://github.com/vuejs/core/issues/6887 для предложений, как это можно сделать.
+:::
+
+## Слоты по умолчанию и `shallow`
+
+Поскольку `shallow` ставит заглушку на все содержимое компонентов, любой `<slot>` не будет отрисовываться при использовании `shallow`. Хотя это не проблема в большинстве случаев, есть несколько сценариев, где это не подходит.
+
+```js
+const CustomButton = {
+  template: `
+    <button>
+      <slot />
+    </button>
+  `
+}
+```
+
+И ты можешь использовать примерно так:
+
+```js
+const App = {
+  props: ['authenticated'],
+  components: { CustomButton },
+  template: `
+    <custom-button>
+      <div v-if="authenticated">Log out</div>
+      <div v-else>Log in</div>
+    </custom-button>
+  `
+}
+```
+
+Если вы используете `shallow`, слот не будет отрисовываться, поскольку функция отрисовки в `<custom-button />` заглушена. Это значит, что вы не сможете проверить отрисованный текст!
+
+Для этого случая вам нужно использовать `config.renderStubDefaultSlot`, который отрисует содержимое слота по умолчанию, даже при использовании `shallow`:
+
+```js {1,4,8}
+import { config, mount } from '@vue/test-utils'
+
+beforeAll(() => {
+  config.global.renderStubDefaultSlot = true
+})
+
+afterAll(() => {
+  config.global.renderStubDefaultSlot = false
+})
+
+test('shallow with stubs', () => {
+  const wrapper = mount(AnotherApp, {
+    props: {
+      authenticated: true
+    },
+    shallow: true
+  })
+
+  expect(wrapper.html()).toContain('Log out')
+})
+```
+
+Поскольку это поведение глобальное, не основанное на `mount`, вам нужно помнить о том, что нужно включить/выключить его до и после каждого теста.
+
+::: tip
+Вы можете также глобально включить эту опцию при помощи импортирования `config` в вашем файле настроек и установить `renderStubDefaultSlot` в `true`. К несчастью, из-за технических ограничений это поведение распространяется только на слоты по умолчанию.
+:::
+
+## `mount`, `shallow` и `stubs`: какой и когда?
+
+Как правило, **чем больше ваши тесты похожи на то, как используется ваше программное обеспечение**, тем больше уверенности они дадут вам.
+
+Тесты, которые используют `mount`, отрисуют всю иерархию компонентов, которая намного ближе к тому, с чем столкнется пользователь в реальном браузере.
+
+С другой стороны, тесты, использующие `shallow`, сфокусированы на определенных компонентах. `shallow` может быть полезным для тестирования продвинутых компонентов в полной изоляции. Если вы имеете только один или два компонента, которые не относятся к вашим тестам, рассмотрите использование `mount` в комбинации с `stubs` вместо `shallow`. Чем больше вы добавите заглушек, тем меньше ваши тесты будут похожи на реальное использование.
+
+Держите в голове, что используете ли вы полное монтирование или неглубокую отрисовку, хорошие тесты фокусируются на входных данных (`props` и пользовательское взаимодействие, такое как `trigger`) и выходных данных (DOM элементы, которые отрисовались и события), не детали реализации.
+
+Поэтому, несмотря на методы монтирования, которые ты будешь использовать, мы предлагаем держать эти советы в голове.
+
+## Заключение
+
+- используйте `global.stubs`, чтобы заменить компонент или директиву на фиктивную для упрощения ваших тестов
+- используйте `shallow: true` (или `shallowMount`) для заглушки всех ваших дочерних компонентов
+- используйте `global.renderStubDefaultSlot` для отрисовки `<slot>` по умолчанию для заглушенных компонентов
diff --git a/docs/ru/guide/advanced/vue-router.md b/docs/ru/guide/advanced/vue-router.md
index 89831dde5..6e95d4072 100644
--- a/docs/ru/guide/advanced/vue-router.md
+++ b/docs/ru/guide/advanced/vue-router.md
@@ -185,7 +185,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
   [Vue warn]: Failed to resolve component: router-view
 ```
 
-`<router-link>` и `<router-view>` компоненты не найдены. Нам нужно установить Vue Router! Поскольку Vue Router - это плагин, мы установим его, используя `global.plugins` опцию в `mount`:
+`<router-link>` и `<router-view>` компоненты не найдены. Нам нужно установить Vue Router! Поскольку Vue Router - это плагин, мы установим его, используя `global.plugins` опцию монтирования:
 
 ```js {12,13,14}
 import { mount } from '@vue/test-utils'
diff --git a/docs/ru/guide/advanced/vuex.md b/docs/ru/guide/advanced/vuex.md
index edbc6dec8..0a388acc4 100644
--- a/docs/ru/guide/advanced/vuex.md
+++ b/docs/ru/guide/advanced/vuex.md
@@ -59,7 +59,7 @@ app.use(store)
 
 Это связано с тем, что Vuex - это плагин. А плагины подключаются путем вызова `app.use`.
 
-Vue Test Utils также позволяет вам установить плагины, используя `global.plugins` опцию в `mount`.
+Vue Test Utils также позволяет вам установить плагины, используя `global.plugins` опцию монтирования.
 
 ```js
 import { createStore } from 'vuex'
@@ -214,7 +214,7 @@ app.use(store, key)
 
 ### Тестирование компонентов, использующий `useStore` без ключа внедрения
 
-Без ключа внедрения данные хранилища могут быть просто вставлены в компонент через глобальную `provide` опцию в `mount`. Название внедряемого хранилища должно быть таким же, как название в компоненте т.е. "store". 
+Без ключа внедрения данные хранилища могут быть просто вставлены в компонент через глобальную `provide` опцию монтирования. Название внедряемого хранилища должно быть таким же, как название в компоненте т.е. "store". 
 
 #### Пример `useStore` без ключа
 
diff --git a/docs/ru/guide/essentials/conditional-rendering.md b/docs/ru/guide/essentials/conditional-rendering.md
index 82a534eb6..7c7f497b9 100644
--- a/docs/ru/guide/essentials/conditional-rendering.md
+++ b/docs/ru/guide/essentials/conditional-rendering.md
@@ -91,9 +91,9 @@ test('renders an admin link', () => {
 })
 ```
 
-Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` опция в `mount` будет всегда выше по приоритету, чем другие стандартные значения.
+Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` опция монтирования будет всегда выше по приоритету, чем другие стандартные значения.
 
-Чтобы изучить какие другие опции в `mount` существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
+Чтобы изучить какие другие опции монтирования существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
 
 ## Проверка видимости элемента
 
@@ -144,5 +144,5 @@ test('does not show the user dropdown', () => {
 
 - Используйте `find()` вместе с `exists()`, чтобы убедиться в наличии элемента в DOM.
 - Используйте `get()` если ты ожидаешь, что элемент точно будет в DOM.
-- `data` опция в `mount` может быть использована для установки значений по умолчанию для компонента.
+- `data` опция монтирования может быть использована для установки значений по умолчанию для компонента.
 - Используйте `get()` с `isVisible()`, чтобы убедиться в видимости элемента, находящегося в DOM
diff --git a/docs/ru/guide/essentials/passing-data.md b/docs/ru/guide/essentials/passing-data.md
index 3c07321ee..b70f8b6cc 100644
--- a/docs/ru/guide/essentials/passing-data.md
+++ b/docs/ru/guide/essentials/passing-data.md
@@ -2,7 +2,7 @@
 
 Vue Test Utils предоставляет несколько путей для установки данных и свойств у компонента, чтобы позволить тебе полностью протестировать поведение компонента в различных ситуациях.
 
-В этой главе мы исследуем `data` и `props` опции в `mount`, а также `VueWrapper.setProps()` для динамического обновления свойств компонента.
+В этой главе мы исследуем `data` и `props` опции монтирования, а также `VueWrapper.setProps()` для динамического обновления свойств компонента.
 
 ## Компонент для пароля
 
@@ -60,7 +60,7 @@ const Password = {
 }
 ```
 
-Чтобы протестировать это, нам нужно установить `minLength`, а также `password`, который меньше, чем это число. Мы можем сделать это используя `data` и `props` опции в `mount` . И наконец, мы проверим, что сообщение об ошибке отрисовалось:
+Чтобы протестировать это, нам нужно установить `minLength`, а также `password`, который меньше, чем это число. Мы можем сделать это используя `data` и `props` опции монтирования. И наконец, мы проверим, что сообщение об ошибке отрисовалось:
 
 ```js
 test('renders an error if length is too short', () => {
@@ -127,7 +127,7 @@ test('renders a greeting when show is true', async () => {
 
 ## Заключение
 
-- Используйте `props` и `data` опции в `mount` для установки начального состояния компонента.
+- Используйте `props` и `data` опции монтирования для установки начального состояния компонента.
 - Используйте `setProps()`, чтобы изменить свойство во время теста.
 - Используйте ключевое слово `await` перед `setProps()`, чтобы убедится, что Vue обновил DOM, перед продолжением теста.
 - Взаимодействие напрямую с вашим компонентом дает больше возможностей. Рассмотрите `setValue` или `trigger` в комбинации с `data`, чтобы убедиться, что все работает верно.

From 1d65751e5f5c9cc9fd78163f8db5416abcaba8c1 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Tue, 14 Jan 2025 14:01:46 +0300
Subject: [PATCH 17/38] add `api` page to avoid errors

---
 docs/ru/api/index.md | 2046 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 2046 insertions(+)
 create mode 100644 docs/ru/api/index.md

diff --git a/docs/ru/api/index.md b/docs/ru/api/index.md
new file mode 100644
index 000000000..abf00506c
--- /dev/null
+++ b/docs/ru/api/index.md
@@ -0,0 +1,2046 @@
+---
+sidebar: auto
+---
+
+# API Reference
+
+## mount
+
+Creates a Wrapper that contains the mounted and rendered Vue component to test.
+Note that when mocking dates/timers with Vitest, this must be called after
+`vi.setSystemTime`.
+
+**Signature:**
+
+```ts
+interface MountingOptions<Props, Data = {}> {
+  attachTo?: Element | string
+  attrs?: Record<string, unknown>
+  data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
+  props?: (RawProps & Props) | ({} extends Props ? null : never)
+  slots?: { [key: string]: Slot } & { default?: Slot }
+  global?: GlobalMountOptions
+  shallow?: boolean
+}
+
+function mount(Component, options?: MountingOptions): VueWrapper
+```
+
+**Details:**
+
+`mount` is the main method exposed by Vue Test Utils. It creates a Vue 3 app that holds and renders the Component under testing. In return, it creates a wrapper to act and assert against the Component.
+
+```js
+import { mount } from '@vue/test-utils'
+
+const Component = {
+  template: '<div>Hello world</div>'
+}
+
+test('mounts a component', () => {
+  const wrapper = mount(Component, {})
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+Notice that `mount` accepts a second parameter to define the component's state configuration.
+
+**Example : mounting with component props and a Vue App plugin**
+
+```js
+const wrapper = mount(Component, {
+  props: {
+    msg: 'world'
+  },
+  global: {
+    plugins: [vuex]
+  }
+})
+```
+
+#### options.global
+
+Among component state, you can configure the aformentioned Vue 3 app by the [`MountingOptions.global` config property.](#global) This would be useful for providing mocked values which your components expect to have available.
+
+::: tip
+If you find yourself having to set common App configuration for many of your tests, then you can set configuration for your entire test suite using the exported [`config` object.](#config)
+:::
+
+### attachTo
+
+Specify the node to mount the component on. This is not available when using `renderToString`.
+
+**Signature:**
+
+```ts
+attachTo?: Element | string
+```
+
+**Details:**
+
+Can be a valid CSS selector, or an [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) connected to the document.
+
+Note that the component is appended to the node, it doesn't replace the whole content of the node. If you mount the component on the same node in multiple tests - make sure to unmount it after each test by calling `wrapper.unmount()`, this will remove the rendered elements from the node.
+
+`Component.vue`:
+
+```vue
+<template>
+  <p>Vue Component</p>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+document.body.innerHTML = `
+  <div>
+    <h1>Non Vue app</h1>
+    <div id="app"></div>
+  </div>
+`
+
+test('mounts on a specific element', () => {
+  const wrapper = mount(Component, {
+    attachTo: document.getElementById('app')
+  })
+
+  expect(document.body.innerHTML).toBe(`
+  <div>
+    <h1>Non Vue app</h1>
+    <div id="app"><div data-v-app=""><p>Vue Component</p></div></div>
+  </div>
+`)
+})
+```
+
+### attrs
+
+Sets HTML attributes to component.
+
+**Signature:**
+
+```ts
+attrs?: Record<string, unknown>
+```
+
+**Details:**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('attrs', () => {
+  const wrapper = mount(Component, {
+    attrs: {
+      id: 'hello',
+      disabled: true
+    }
+  })
+
+  expect(wrapper.attributes()).toEqual({
+    disabled: 'true',
+    id: 'hello'
+  })
+})
+```
+
+Notice that setting a defined prop will always trump an attribute:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('attribute is overridden by a prop with the same name', () => {
+  const wrapper = mount(Component, {
+    props: {
+      message: 'Hello World'
+    },
+    attrs: {
+      message: 'this will get overridden'
+    }
+  })
+
+  expect(wrapper.props()).toEqual({ message: 'Hello World' })
+  expect(wrapper.attributes()).toEqual({})
+})
+```
+
+### data
+
+Overrides a component's default `data`. Must be a function.
+
+**Signature:**
+
+```ts
+data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
+```
+
+**Details:**
+
+`Component.vue`
+
+```vue
+<template>
+  <div>Hello {{ message }}</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: 'everyone'
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('data', () => {
+  const wrapper = mount(Component, {
+    data() {
+      return {
+        message: 'world'
+      }
+    }
+  })
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+### props
+
+Sets props on a component when mounted.
+
+**Signature:**
+
+```ts
+props?: (RawProps & Props) | ({} extends Props ? null : never)
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Count: {{ count }}</span>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('props', () => {
+  const wrapper = mount(Component, {
+    props: {
+      count: 5
+    }
+  })
+
+  expect(wrapper.html()).toContain('Count: 5')
+})
+```
+
+### slots
+
+Sets values for slots on a component.
+
+**Signature:**
+
+```ts
+type Slot = VNode | string | { render: Function } | Function | Component
+
+slots?: { [key: string]: Slot } & { default?: Slot }
+```
+
+**Details:**
+
+Slots can be a string or any valid component definition either imported from a `.vue` file or provided inline
+
+`Component.vue`:
+
+```vue
+<template>
+  <slot name="first" />
+  <slot />
+  <slot name="second" />
+</template>
+```
+
+`Bar.vue`:
+
+```vue
+<template>
+  <div>Bar</div>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { h } from 'vue';
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+import Bar from './Bar.vue'
+
+test('renders slots content', () => {
+  const wrapper = mount(Component, {
+    slots: {
+      default: 'Default',
+      first: h('h1', {}, 'Named Slot'),
+      second: Bar
+    }
+  })
+
+  expect(wrapper.html()).toBe('<h1>Named Slot</h1>Default<div>Bar</div>')
+})
+```
+
+### global
+
+**Signature:**
+
+```ts
+type GlobalMountOptions = {
+  plugins?: (Plugin | [Plugin, ...any[]])[]
+  config?: Partial<Omit<AppConfig, 'isNativeTag'>>
+  mixins?: ComponentOptions[]
+  mocks?: Record<string, any>
+  provide?: Record<any, any>
+  components?: Record<string, Component | object>
+  directives?: Record<string, Directive>
+  stubs?: Stubs = Record<string, boolean | Component> | Array<string>
+  renderStubDefaultSlot?: boolean
+}
+```
+
+You can configure all the `global` options on both a per test basis and also for the entire test suite. [See here for how to configure project wide defaults](#config-global).
+
+#### global.components
+
+Registers components globally to the mounted component.
+
+**Signature:**
+
+```ts
+components?: Record<string, Component | object>
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>
+    <global-component />
+  </div>
+</template>
+
+<script>
+import GlobalComponent from '@/components/GlobalComponent'
+
+export default {
+  components: {
+    GlobalComponent
+  }
+}
+</script>
+```
+
+`GlobalComponent.vue`:
+
+```vue
+<template>
+  <div class="global-component">My Global Component</div>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import GlobalComponent from '@/components/GlobalComponent'
+import Component from './Component.vue'
+
+test('global.components', () => {
+  const wrapper = mount(Component, {
+    global: {
+      components: {
+        GlobalComponent
+      }
+    }
+  })
+
+  expect(wrapper.find('.global-component').exists()).toBe(true)
+})
+```
+
+#### global.config
+
+Configures [Vue's application global configuration](https://v3.vuejs.org/api/application-config.html#application-config).
+
+**Signature:**
+
+```ts
+config?: Partial<Omit<AppConfig, 'isNativeTag'>>
+```
+
+#### global.directives
+
+Registers a [directive](https://v3.vuejs.org/api/directives.html#directives) globally to the mounted component.
+
+**Signature:**
+
+```ts
+directives?: Record<string, Directive>
+```
+
+**Details:**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+
+import Directive from '@/directives/Directive'
+
+const Component = {
+  template: '<div v-bar>Foo</div>'
+}
+
+test('global.directives', () => {
+  const wrapper = mount(Component, {
+    global: {
+      directives: {
+        Bar: Directive // Bar matches v-bar
+      }
+    }
+  })
+})
+```
+
+#### global.mixins
+
+Registers a [mixin](https://v3.vuejs.org/guide/mixins.html) globally to the mounted component.
+
+**Signature:**
+
+```ts
+mixins?: ComponentOptions[]
+```
+
+**Details:**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.mixins', () => {
+  const wrapper = mount(Component, {
+    global: {
+      mixins: [mixin]
+    }
+  })
+})
+```
+
+#### global.mocks
+
+Mocks a global instance property. Can be used for mocking out `this.$store`, `this.$router` etc.
+
+**Signature:**
+
+```ts
+mocks?: Record<string, any>
+```
+
+**Details:**
+
+::: warning
+This is designed to mock variables injected by third party plugins, not Vue's native properties such as $root, $children, etc.
+:::
+
+`Component.vue`:
+
+```vue
+<template>
+  <button @click="onClick" />
+</template>
+
+<script>
+export default {
+  methods: {
+    onClick() {
+      this.$store.dispatch('click')
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.mocks', async () => {
+  const $store = {
+    dispatch: jest.fn()
+  }
+
+  const wrapper = mount(Component, {
+    global: {
+      mocks: {
+        $store
+      }
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect($store.dispatch).toHaveBeenCalledWith('click')
+})
+```
+
+#### global.plugins
+
+Installs plugins on the mounted component.
+
+**Signature:**
+
+```ts
+plugins?: (Plugin | [Plugin, ...any[]])[]
+```
+
+**Details:**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+import myPlugin from '@/plugins/myPlugin'
+
+test('global.plugins', () => {
+  mount(Component, {
+    global: {
+      plugins: [myPlugin]
+    }
+  })
+})
+```
+
+To use plugin with options, an array of options can be passed.
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.plugins with options', () => {
+  mount(Component, {
+    global: {
+      plugins: [Plugin, [PluginWithOptions, 'argument 1', 'another argument']]
+    }
+  })
+})
+```
+
+#### global.provide
+
+Provides data to be received in a `setup` function via `inject`.
+
+**Signature:**
+
+```ts
+provide?: Record<any, any>
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>Theme is {{ theme }}</div>
+</template>
+
+<script>
+import { inject } from 'vue'
+
+export default {
+  setup() {
+    const theme = inject('Theme')
+    return {
+      theme
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.provide', () => {
+  const wrapper = mount(Component, {
+    global: {
+      provide: {
+        Theme: 'dark'
+      }
+    }
+  })
+
+  console.log(wrapper.html()) //=> <div>Theme is dark</div>
+})
+```
+
+If you are using a ES6 `Symbol` for your provide key, you can use it as a dynamic key:
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+const ThemeSymbol = Symbol()
+
+mount(Component, {
+  global: {
+    provide: {
+      [ThemeSymbol]: 'value'
+    }
+  }
+})
+```
+
+#### global.renderStubDefaultSlot
+
+Renders the `default` slot content, even when using `shallow` or `shallowMount`.
+
+**Signature:**
+
+```ts
+renderStubDefaultSlot?: boolean
+```
+
+**Details:**
+
+Defaults to **false**.
+
+`Component.vue`
+
+```vue
+<template>
+  <slot />
+  <another-component />
+</template>
+
+<script>
+export default {
+  components: {
+    AnotherComponent
+  }
+}
+</script>
+```
+
+`AnotherComponent.vue`
+
+```vue
+<template>
+  <p>Another component content</p>
+</template>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.renderStubDefaultSlot', () => {
+  const wrapper = mount(ComponentWithSlots, {
+    slots: {
+      default: '<div>My slot content</div>'
+    },
+    shallow: true,
+    global: {
+      renderStubDefaultSlot: true
+    }
+  })
+
+  expect(wrapper.html()).toBe(
+    '<div>My slot content</div><another-component-stub></another-component-stub>'
+  )
+})
+```
+
+Due to technical limitations, **this behavior cannot be extended to slots other than the default one**.
+
+#### global.stubs
+
+Sets a global stub on the mounted component.
+
+**Signature:**
+
+```ts
+stubs?: Record<any, any>
+```
+
+**Details:**
+
+It stubs `Transition` and `TransitionGroup` by default.
+
+`Component.vue`:
+
+```vue
+<template>
+  <div><foo /></div>
+</template>
+
+<script>
+import Foo from '@/Foo.vue'
+
+export default {
+  components: { Foo }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.stubs using array syntax', () => {
+  const wrapper = mount(Component, {
+    global: {
+      stubs: ['Foo']
+    }
+  })
+
+  expect(wrapper.html()).toEqual('<div><foo-stub></div>')
+})
+
+test('global.stubs using object syntax', () => {
+  const wrapper = mount(Component, {
+    global: {
+      stubs: { Foo: true }
+    }
+  })
+
+  expect(wrapper.html()).toEqual('<div><foo-stub></div>')
+})
+
+test('global.stubs using a custom component', () => {
+  const CustomStub = {
+    name: 'CustomStub',
+    template: '<p>custom stub content</p>'
+  }
+
+  const wrapper = mount(Component, {
+    global: {
+      stubs: { Foo: CustomStub }
+    }
+  })
+
+  expect(wrapper.html()).toEqual('<div><p>custom stub content</p></div>')
+})
+```
+
+### shallow
+
+Stubs out all child components from the component.
+
+**Signature:**
+
+```ts
+shallow?: boolean
+```
+
+**Details:**
+
+Defaults to **false**.
+
+`Component.vue`
+
+```vue
+<template>
+  <a-component />
+  <another-component />
+</template>
+
+<script>
+export default {
+  components: {
+    AComponent,
+    AnotherComponent
+  }
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('shallow', () => {
+  const wrapper = mount(Component, { shallow: true })
+
+  expect(wrapper.html()).toEqual(
+    `<a-component-stub></a-component-stub><another-component-stub></another-component-stub>`
+  )
+})
+```
+
+::: tip
+`shallowMount()` is an alias to mounting a component with `shallow: true`.
+:::
+
+## Wrapper methods
+
+When you use `mount`, a `VueWrapper` is returned with a number of useful methods for testing. A `VueWrapper` is a thin wrapper around your component instance.
+
+Notice that methods like `find` return a `DOMWrapper`, which is a thin wrapper around the DOM nodes in your component and its children. Both implement a similar API.
+
+### attributes
+
+Returns attributes on a DOM node.
+
+**Signature:**
+
+```ts
+attributes(): { [key: string]: string }
+attributes(key: string): string
+attributes(key?: string): { [key: string]: string } | string
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div id="foo" :class="className" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      className: 'bar'
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('attributes', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.attributes('id')).toBe('foo')
+  expect(wrapper.attributes('class')).toBe('bar')
+})
+```
+
+### classes
+
+**Signature:**
+
+```ts
+classes(): string[]
+classes(className: string): boolean
+classes(className?: string): string[] | boolean
+```
+
+**Details:**
+
+Returns an array of classes on an element.
+
+`Component.vue`:
+
+```vue
+<template>
+  <span class="my-span" />
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('classes', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.classes()).toContain('my-span')
+  expect(wrapper.classes('my-span')).toBe(true)
+  expect(wrapper.classes('not-existing')).toBe(false)
+})
+```
+
+### emitted
+
+Returns all the emitted events from the Component.
+
+**Signature:**
+
+```ts
+emitted<T = unknown>(): Record<string, T[]>
+emitted<T = unknown>(eventName: string): undefined | T[]
+emitted<T = unknown>(eventName?: string): undefined | T[] | Record<string, T[]>
+```
+
+**Details:**
+
+The arguments are stored in an array, so you can verify which arguments were emitted along with each event.
+
+`Component.vue`:
+
+```vue
+<script>
+export default {
+  created() {
+    this.$emit('greet', 'hello')
+    this.$emit('greet', 'goodbye')
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('emitted', () => {
+  const wrapper = mount(Component)
+
+  // wrapper.emitted() equals to { greet: [ ['hello'], ['goodbye'] ] }
+
+  expect(wrapper.emitted()).toHaveProperty('greet')
+  expect(wrapper.emitted().greet).toHaveLength(2)
+  expect(wrapper.emitted().greet[0]).toEqual(['hello'])
+  expect(wrapper.emitted().greet[1]).toEqual(['goodbye'])
+})
+```
+
+### exists
+
+Verify whether an element exists or not.
+
+**Signature:**
+
+```ts
+exists(): boolean
+```
+
+**Details:**
+
+You can use the same syntax `querySelector` implements.
+
+`Component.vue`:
+
+```vue
+<template>
+  <span />
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('exists', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.find('span').exists()).toBe(true)
+  expect(wrapper.find('p').exists()).toBe(false)
+})
+```
+
+### find
+
+Finds an element and returns a `DOMWrapper` if one is found.
+
+**Signature:**
+
+```ts
+find<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>
+find<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>
+find<T extends Element>(selector: string): DOMWrapper<T>
+find(selector: string): DOMWrapper<Element>
+find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;
+```
+
+**Details:**
+
+You can use the same syntax `querySelector` implements. `find` is basically an alias for `querySelector`. In addition you can search for element refs.
+
+It is similar to `get`, but `find` returns an ErrorWrapper if an element is not found while [`get`](#get) will throw an error.
+
+As a rule of thumb, always use `find` when you are asserting something doesn't exist. If you are asserting something does exist, use [`get`](#get).
+
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Span</span>
+  <span data-test="span">Span</span>
+  <span ref="span">Span</span>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('find', () => {
+  const wrapper = mount(Component)
+
+  wrapper.find('span') //=> found; returns DOMWrapper
+  wrapper.find('[data-test="span"]') //=> found; returns DOMWrapper
+  wrapper.find({ ref: 'span' }) //=> found; returns DOMWrapper
+  wrapper.find('p') //=> nothing found; returns ErrorWrapper
+})
+```
+
+### findAll
+
+Similar to `find`, but instead returns an array of `DOMWrapper`.
+
+**Signature:**
+
+```ts
+findAll<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>[]
+findAll<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>[]
+findAll<T extends Element>(selector: string): DOMWrapper<T>[]
+findAll(selector: string): DOMWrapper<Element>[]
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <span v-for="number in [1, 2, 3]" :key="number" data-test="number">
+    {{ number }}
+  </span>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import BaseTable from './BaseTable.vue'
+
+test('findAll', () => {
+  const wrapper = mount(BaseTable)
+
+  // .findAll() returns an array of DOMWrappers
+  const thirdRow = wrapper.findAll('span')[2]
+})
+```
+
+### findComponent
+
+Finds a Vue Component instance and returns a `VueWrapper` if found. Returns `ErrorWrapper` otherwise.
+
+**Signature:**
+
+```ts
+findComponent<T extends never>(selector: string): WrapperLike
+findComponent<T extends DefinedComponent>(selector: T | Exclude<FindComponentSelector, FunctionalComponent>): VueWrapper<InstanceType<T>>
+findComponent<T extends FunctionalComponent>(selector: T | string): DOMWrapper<Element>
+findComponent<T extends never>(selector: NameSelector | RefSelector): VueWrapper
+findComponent<T extends ComponentPublicInstance>(selector: T | FindComponentSelector): VueWrapper<T>
+findComponent(selector: FindComponentSelector): WrapperLike
+```
+
+**Details:**
+
+`findComponent` supports several syntaxes:
+
+| syntax         | example                       | details                                                      |
+| -------------- | ----------------------------- | ------------------------------------------------------------ |
+| querySelector  | `findComponent('.component')` | Matches standard query selector.                             |
+| Component name | `findComponent({name: 'a'})`  | matches PascalCase, snake-case, camelCase                    |
+| Component ref  | `findComponent({ref: 'ref'})` | Can be used only on direct ref children of mounted component |
+| SFC            | `findComponent(Component)`    | Pass an imported component directly                          |
+
+`Foo.vue`
+
+```vue
+<template>
+  <div class="foo">Foo</div>
+</template>
+
+<script>
+export default {
+  name: 'Foo'
+}
+</script>
+```
+
+`Component.vue`:
+
+```vue
+<template>
+  <Foo data-test="foo" ref="foo" class="foo" />
+</template>
+
+<script>
+import Foo from '@/Foo'
+
+export default {
+  components: { Foo }
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+import Foo from '@/Foo.vue'
+
+test('findComponent', () => {
+  const wrapper = mount(Component)
+
+  // All the following queries would return a VueWrapper
+
+  wrapper.findComponent('.foo')
+  wrapper.findComponent('[data-test="foo"]')
+
+  wrapper.findComponent({ name: 'Foo' })
+
+  wrapper.findComponent({ ref: 'foo' })
+
+  wrapper.findComponent(Foo)
+})
+```
+
+:::warning
+If `ref` in component points to HTML element, `findComponent` will return empty wrapper. This is intended behaviour.
+:::
+
+:::warning Usage with CSS selectors
+Using `findComponent` with CSS selector might have confusing behavior
+
+Consider this example:
+
+```js
+const ChildComponent = {
+  name: 'Child',
+  template: '<div class="child"></div>'
+}
+const RootComponent = {
+  name: 'Root',
+  components: { ChildComponent },
+  template: '<child-component class="root" />'
+}
+const wrapper = mount(RootComponent)
+const rootByCss = wrapper.findComponent('.root') // => finds Root
+expect(rootByCss.vm.$options.name).toBe('Root')
+const childByCss = wrapper.findComponent('.child')
+expect(childByCss.vm.$options.name).toBe('Root') // => still Root
+```
+
+The reason for such behavior is that `RootComponent` and `ChildComponent` are sharing same DOM node and only first matching component is included for each unique DOM node
+:::
+
+:::info WrapperLike type when using CSS selector
+When using `wrapper.findComponent('.foo')` for example then VTU will return the `WrapperLike` type. This is because functional components
+would need a `DOMWrapper` otherwise a `VueWrapper`. You can force to return a `VueWrapper` by providing the correct component type:
+
+```typescript
+wrapper.findComponent('.foo') // returns WrapperLike
+wrapper.findComponent<typeof FooComponent>('.foo') // returns VueWrapper
+wrapper.findComponent<DefineComponent>('.foo') // returns VueWrapper
+```
+:::
+
+### findAllComponents
+
+**Signature:**
+
+```ts
+findAllComponents<T extends never>(selector: string): WrapperLike[]
+findAllComponents<T extends DefinedComponent>(selector: T | Exclude<FindAllComponentsSelector, FunctionalComponent>): VueWrapper<InstanceType<T>>[]
+findAllComponents<T extends FunctionalComponent>(selector: string): DOMWrapper<Element>[]
+findAllComponents<T extends FunctionalComponent>(selector: T): DOMWrapper<Node>[]
+findAllComponents<T extends never>(selector: NameSelector): VueWrapper[]
+findAllComponents<T extends ComponentPublicInstance>(selector: T | FindAllComponentsSelector): VueWrapper<T>[]
+findAllComponents(selector: FindAllComponentsSelector): WrapperLike[]
+```
+
+**Details:**
+
+Similar to `findComponent` but finds all Vue Component instances that match the query. Returns an array of `VueWrapper`.
+
+:::warning
+`ref` syntax is not supported in `findAllComponents`. All other query syntaxes are valid.
+:::
+
+`Component.vue`:
+
+```vue
+<template>
+  <FooComponent v-for="number in [1, 2, 3]" :key="number" data-test="number">
+    {{ number }}
+  </FooComponent>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('findAllComponents', () => {
+  const wrapper = mount(Component)
+
+  // Returns an array of VueWrapper
+  wrapper.findAllComponents('[data-test="number"]')
+})
+```
+
+:::warning Usage with CSS selectors
+`findAllComponents` has same behavior when used with CSS selector as [findComponent](#findcomponent)
+:::
+
+### get
+
+Gets an element and returns a `DOMWrapper` if found. Otherwise it throws an error.
+
+**Signature:**
+
+```ts
+get<K extends keyof HTMLElementTagNameMap>(selector: K): Omit<DOMWrapper<HTMLElementTagNameMap[K]>, 'exists'>
+get<K extends keyof SVGElementTagNameMap>(selector: K): Omit<DOMWrapper<SVGElementTagNameMap[K]>, 'exists'>
+get<T extends Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>
+get(selector: string): Omit<DOMWrapper<Element>, 'exists'>
+```
+
+**Details:**
+
+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).
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Span</span>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('get', () => {
+  const wrapper = mount(Component)
+
+  wrapper.get('span') //=> found; returns DOMWrapper
+
+  expect(() => wrapper.get('.not-there')).toThrowError()
+})
+```
+
+### getComponent
+
+Gets a Vue Component instance and returns a `VueWrapper` if found. Otherwise it throws an error.
+
+**Signature:**
+
+```ts
+getComponent<T extends ComponentPublicInstance>(selector: new () => T): Omit<VueWrapper<T>, 'exists'>
+getComponent<T extends ComponentPublicInstance>(selector: { name: string } | { ref: string } | string): Omit<VueWrapper<T>, 'exists'>
+getComponent<T extends ComponentPublicInstance>(selector: any): Omit<VueWrapper<T>, 'exists'>
+```
+
+**Details:**
+
+It is similar to `findComponent`, but `getComponent` throws an error if a Vue Component instance is not found while [`findComponent`](#findComponent) will return an ErrorWrapper.
+
+**Supported syntax:**
+
+| syntax         | example                      | details                                                      |
+| -------------- | ---------------------------- | ------------------------------------------------------------ |
+| querySelector  | `getComponent('.component')` | Matches standard query selector.                             |
+| Component name | `getComponent({name: 'a'})`  | matches PascalCase, snake-case, camelCase                    |
+| Component ref  | `getComponent({ref: 'ref'})` | Can be used only on direct ref children of mounted component |
+| SFC            | `getComponent(Component)`    | Pass an imported component directly                          |
+
+`Foo.vue`
+
+```vue
+<template>
+  <div class="foo">Foo</div>
+</template>
+
+<script>
+export default {
+  name: 'Foo'
+}
+</script>
+```
+
+`Component.vue`:
+
+```vue
+<template>
+  <Foo />
+</template>
+
+<script>
+import Foo from '@/Foo'
+
+export default {
+  components: { Foo }
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+import Foo from '@/Foo.vue'
+
+test('getComponent', () => {
+  const wrapper = mount(Component)
+
+  wrapper.getComponent({ name: 'foo' }) // returns a VueWrapper
+  wrapper.getComponent(Foo) // returns a VueWrapper
+
+  expect(() => wrapper.getComponent('.not-there')).toThrowError()
+})
+```
+
+### html
+
+Returns the HTML of an element.
+
+By default the output is formatted with [`js-beautify`](https://github.com/beautify-web/js-beautify)
+to make snapshots more readable. Use `raw: true` option to receive the unformatted html string.
+
+**Signature:**
+
+```ts
+html(): string
+html(options?: { raw?: boolean }): string
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>
+    <p>Hello world</p>
+  </div>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('html', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.html()).toBe(
+    '<div>\n' +
+    '  <p>Hello world</p>\n' +
+    '</div>'
+  )
+
+  expect(wrapper.html({ raw: true })).toBe('<div><p>Hello world</p></div>')
+})
+```
+
+### isVisible
+
+Verify whether an element is visible or not.
+
+**Signature:**
+
+```ts
+isVisible(): boolean
+```
+
+**Details:**
+
+::: warning
+`isVisible()` only works correctly if the wrapper is attached to the DOM using [`attachTo`](#attachTo)
+:::
+
+```js
+const Component = {
+  template: `<div v-show="false"><span /></div>`
+}
+
+test('isVisible', () => {
+  const wrapper = mount(Component, {
+    attachTo: document.body
+  });
+
+  expect(wrapper.find('span').isVisible()).toBe(false);
+})
+```
+
+### props
+
+Returns props passed to a Vue Component.
+
+**Signature:**
+
+```ts
+props(): { [key: string]: any }
+props(selector: string): any
+props(selector?: string): { [key: string]: any } | any
+```
+
+**Details:**
+
+`Component.vue`:
+
+```js
+export default {
+  name: 'Component',
+  props: {
+    truthy: Boolean,
+    object: Object,
+    string: String
+  }
+}
+```
+
+```vue
+<template>
+  <Component truthy :object="{}" string="string" />
+</template>
+
+<script>
+import Component from '@/Component'
+
+export default {
+  components: { Component }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('props', () => {
+  const wrapper = mount(Component, {
+    global: { stubs: ['Foo'] }
+  })
+
+  const foo = wrapper.getComponent({ name: 'Foo' })
+
+  expect(foo.props('truthy')).toBe(true)
+  expect(foo.props('object')).toEqual({})
+  expect(foo.props('notExisting')).toEqual(undefined)
+  expect(foo.props()).toEqual({
+    truthy: true,
+    object: {},
+    string: 'string'
+  })
+})
+```
+
+:::tip
+As a rule of thumb, test against the effects of a passed prop (a DOM update, an emitted event, and so on). This will make tests more powerful than simply asserting that a prop is passed.
+:::
+
+### setData
+
+Updates component internal data.
+
+**Signature:**
+
+```ts
+setData(data: Record<string, any>): Promise<void>
+```
+
+**Details:**
+
+`setData` does not allow setting new properties that are not defined in the component.
+
+::: warning
+Also, notice that `setData` does not modify composition API `setup()` data.
+:::
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>Count: {{ count }}</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('setData', async () => {
+  const wrapper = mount(Component)
+  expect(wrapper.html()).toContain('Count: 0')
+
+  await wrapper.setData({ count: 1 })
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+::: warning
+You should use `await` when you call `setData` to ensure that Vue updates the DOM before you make an assertion.
+:::
+
+### setProps
+
+Updates component props.
+
+**Signature:**
+
+```ts
+setProps(props: Record<string, any>): Promise<void>
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<script>
+export default {
+  props: ['message']
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('updates prop', async () => {
+  const wrapper = mount(Component, {
+    props: {
+      message: 'hello'
+    }
+  })
+
+  expect(wrapper.html()).toContain('hello')
+
+  await wrapper.setProps({ message: 'goodbye' })
+
+  expect(wrapper.html()).toContain('goodbye')
+})
+```
+
+::: warning
+You should use `await` when you call `setProps` to ensure that Vue updates the DOM before you make an assertion.
+:::
+
+### setValue
+
+Sets a value on DOM element. Including:
+
+- `<input>`
+  - `type="checkbox"` and `type="radio"` are detected and will have `element.checked` set.
+- `<select>`
+  - `<option>` is detected and will have `element.selected` set.
+
+**Signature:**
+
+```ts
+setValue(value: unknown, prop?: string): Promise<void>
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <input type="text" v-model="text" />
+  <p>Text: {{ text }}</p>
+
+  <input type="checkbox" v-model="checked" />
+  <div v-if="checked">The input has been checked!</div>
+
+  <select v-model="multiselectValue" multiple>
+    <option value="value1"></option>
+    <option value="value2"></option>
+    <option value="value3"></option>
+  </select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: '',
+      checked: false,
+      multiselectValue: []
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('setValue on checkbox', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find('input[type="checkbox"]').setValue(true)
+  expect(wrapper.find('div').exists()).toBe(true)
+
+  await wrapper.find('input[type="checkbox"]').setValue(false)
+  expect(wrapper.find('div').exists()).toBe(false)
+})
+
+test('setValue on input text', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find('input[type="text"]').setValue('hello!')
+  expect(wrapper.find('p').text()).toBe('Text: hello!')
+})
+
+test('setValue on multi select', async () => {
+  const wrapper = mount(Component)
+
+  // For select without multiple
+  await wrapper.find('select').setValue('value1')
+  // For select with multiple
+  await wrapper.find('select').setValue(['value1', 'value3'])
+})
+```
+
+::: warning
+You should use `await` when you call `setValue` to ensure that Vue updates the DOM before you make an assertion.
+:::
+
+### text
+
+Returns the text content of an element.
+
+**Signature:**
+
+```ts
+text(): string
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <p>Hello world</p>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('text', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.find('p').text()).toBe('Hello world')
+})
+```
+
+### trigger
+
+Triggers a DOM event, for example `click`, `submit` or `keyup`.
+
+**Signature:**
+
+```ts
+interface TriggerOptions {
+  code?: String
+  key?: String
+  keyCode?: Number
+  [custom: string]: any
+}
+
+trigger(eventString: string, options?: TriggerOptions | undefined): Promise<void>
+```
+
+**Details:**
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Count: {{ count }}</span>
+  <button @click="count++">Click me</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('trigger', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find('button').trigger('click')
+
+  expect(wrapper.find('span').text()).toBe('Count: 1')
+})
+```
+
+Note that `trigger` accepts a second argument to pass options to the triggered Event:
+
+```js
+await wrapper.trigger('keydown', { keyCode: 65 })
+```
+
+::: warning
+You should use `await` when you call `trigger` to ensure that Vue updates the DOM before you make an assertion.
+:::
+
+::: warning
+Some events, like clicking on a checkbox to change its `v-model`,
+will only work if the test uses `attachTo: document.body`.
+Otherwise, the `change` event will not be triggered, and the `v-model` value does not change.
+:::
+
+### unmount
+
+Unmount the application from the DOM.
+
+**Signature:**
+
+```ts
+unmount(): void
+```
+
+**Details:**
+
+It only works on the root `VueWrapper` returned from `mount`. Useful for manual clean-up after tests.
+
+`Component.vue`:
+
+```vue
+<script>
+export default {
+  unmounted() {
+    console.log('unmounted!')
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('unmount', () => {
+  const wrapper = mount(Component)
+
+  wrapper.unmount()
+  // Component is removed from DOM.
+  // console.log has been called with 'unmounted!'
+})
+```
+
+## Wrapper properties
+
+### vm
+
+**Signature:**
+
+```ts
+vm: ComponentPublicInstance
+```
+
+**Details:**
+
+The `Vue` app instance. You can access all of the [instance methods](https://v3.vuejs.org/api/instance-methods.html) and [instance properties](https://v3.vuejs.org/api/instance-properties.html).
+
+Notice that `vm` is only available on a `VueWrapper`.
+
+:::tip
+As a rule of thumb, test against the effects of a passed prop (a DOM update, an emitted event, and so on). This will make tests more powerful than simply asserting that a prop is passed.
+:::
+
+## shallowMount
+
+Creates a Wrapper that contains the mounted and rendered Vue component to test with all children stubbed out.
+
+**Signature:**
+
+```ts
+interface MountingOptions<Props, Data = {}> {
+  attachTo?: Element | string
+  attrs?: Record<string, unknown>
+  data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
+  props?: (RawProps & Props) | ({} extends Props ? null : never)
+  slots?: { [key: string]: Slot } & { default?: Slot }
+  global?: GlobalMountOptions
+}
+
+function shallowMount(Component, options?: MountingOptions): VueWrapper
+```
+
+**Details:**
+
+`shallowMount` behaves exactly like `mount`, but it stubs all child components by default. Essentially, `shallowMount(Component)` is an alias of `mount(Component, { shallow: true })`.
+
+## enableAutoUnmount
+
+**Signature:**
+
+```ts
+enableAutoUnmount(hook: (callback: () => void) => void);
+disableAutoUnmount(): void;
+```
+
+**Details:**
+
+`enableAutoUnmount` allows to automatically destroy Vue wrappers. Destroy logic is passed as callback to `hook` Function.
+Common usage is to use `enableAutoUnmount` with teardown helper functions provided by your test framework, such as `afterEach`:
+
+```ts
+import { enableAutoUnmount } from '@vue/test-utils'
+
+enableAutoUnmount(afterEach)
+```
+
+`disableAutoUnmount` might be useful if you want this behavior only in specific subset of your test suite and you want to explicitly disable this behavior
+
+## flushPromises
+
+**Signature:**
+
+```ts
+flushPromises(): Promise<unknown>
+```
+
+**Details:**
+
+`flushPromises` flushes all resolved promise handlers. This helps make sure async operations such as promises or DOM updates have happened before asserting against them.
+
+Check out [Making HTTP requests](../guide/advanced/http-requests.md) to see an example of `flushPromises` in action.
+
+## config
+
+### config.global
+
+**Signature:**
+
+```ts
+type GlobalMountOptions = {
+  plugins?: (Plugin | [Plugin, ...any[]])[]
+  config?: Partial<Omit<AppConfig, 'isNativeTag'>>
+  mixins?: ComponentOptions[]
+  mocks?: Record<string, any>
+  provide?: Record<any, any>
+  components?: Record<string, Component | object>
+  directives?: Record<string, Directive>
+  stubs?: Stubs = Record<string, boolean | Component> | Array<string>
+  renderStubDefaultSlot?: boolean
+}
+```
+
+**Details:**
+
+Instead of configuring mounting options on a per test basis, you can configure them for your entire test suite. These will be used by default every time you `mount` a component. If desired, you can then override your defaults on a per test basis.
+
+**Example :**
+
+An example might be globally mocking the `$t` variable from vue-i18n and a component:
+
+`Component.vue`:
+
+```vue
+<template>
+  <p>{{ $t('message') }}</p>
+  <my-component />
+</template>
+
+<script>
+import MyComponent from '@/components/MyComponent'
+
+export default {
+  components: {
+    MyComponent
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js {1,8-10,12-14}
+import { config, mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+const MyComponent = defineComponent({
+  template: `<div>My component</div>`
+})
+
+config.global.stubs = {
+  MyComponent
+}
+
+config.global.mocks = {
+  $t: (text) => text
+}
+
+test('config.global mocks and stubs', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.html()).toBe('<p>message</p><div>My component</div>')
+})
+```
+
+::: tip
+Remember that this behavior is global, not on a mount by mount basis. You might need to enable/disable it before and after each test.
+:::
+
+## components
+
+### RouterLinkStub
+
+A component to stub the Vue Router `router-link` component when you don't want to mock or include a full router.
+
+You can use this component to find a `router-link` component in the render tree.
+
+**Usage:**
+
+Set as a stub in the mounting options:
+```js
+import { mount, RouterLinkStub } from '@vue/test-utils'
+
+const wrapper = mount(Component, {
+  global: {
+    stubs: {
+      RouterLink: RouterLinkStub,
+    },
+  },
+})
+
+expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path')
+```
+
+**Usage with slot:**
+
+The `RouterLinkStub` component supports slot content and will return very basic values for its slot props. If you need more specific slot prop values for your tests, consider using a [real router](../guide/advanced/vue-router.html#using-a-real-router) so you can use a real `router-link` component. Alternatively, you can define your own `RouterLinkStub` component by copying the implementation from the test-utils package.

From cccd0fb58d27cd704349e79d267331ac1bbfc46e Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Mon, 20 Jan 2025 12:38:13 +0300
Subject: [PATCH 18/38] add `api` page

---
 docs/.vitepress/config/ru.mts                 |   4 +-
 docs/ru/api/index.md                          | 457 +++++++++---------
 docs/ru/guide/advanced/component-instance.md  |   6 +-
 .../guide/advanced/reusability-composition.md |   2 +-
 docs/ru/guide/advanced/teleport.md            |   2 +-
 docs/ru/guide/advanced/transitions.md         |   2 +-
 .../guide/essentials/conditional-rendering.md |  10 +-
 docs/ru/guide/essentials/easy-to-test.md      |   4 +-
 docs/ru/guide/essentials/forms.md             |   2 +-
 docs/ru/guide/index.md                        |   4 +-
 10 files changed, 245 insertions(+), 248 deletions(-)

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index bcb5ddbe2..932fafd36 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -25,7 +25,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
     },
     nav: [
       { text: 'Руководство', link: '/ru/guide/' },
-      { text: 'API', link: '/api/' },
+      { text: 'API', link: '/ru/api/' },
       { text: 'Миграция с Vue 2', link: '/migration/' },
       {
         text: 'Changelog',
@@ -120,7 +120,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         },
         {
           text: 'API руководство',
-          link: '/api/'
+          link: '/ru/api/'
         }
       ]
     }
diff --git a/docs/ru/api/index.md b/docs/ru/api/index.md
index abf00506c..4dbafbd50 100644
--- a/docs/ru/api/index.md
+++ b/docs/ru/api/index.md
@@ -6,11 +6,10 @@ sidebar: auto
 
 ## mount
 
-Creates a Wrapper that contains the mounted and rendered Vue component to test.
-Note that when mocking dates/timers with Vitest, this must be called after
-`vi.setSystemTime`.
+Создает оболочку, которая содержит смонтированный и отрисованный Vue компонент для тестирования. 
+Обратите внимание, что при имитации даты/таймеров при помощи Vitest, он должен быть вызван после `vi.setSystemTime`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
@@ -26,9 +25,9 @@ interface MountingOptions<Props, Data = {}> {
 function mount(Component, options?: MountingOptions): VueWrapper
 ```
 
-**Details:**
+**Подробности:**
 
-`mount` is the main method exposed by Vue Test Utils. It creates a Vue 3 app that holds and renders the Component under testing. In return, it creates a wrapper to act and assert against the Component.
+`mount` - это главный метод, предоставляемый Vue Test Utils. Он создает Vue 3 приложение, которое содержит и отрисовывает компонент для тестирования. В свою очередь, он создает оболочку для взаимодействия и проверки компонента.
 
 ```js
 import { mount } from '@vue/test-utils'
@@ -44,9 +43,9 @@ test('mounts a component', () => {
 })
 ```
 
-Notice that `mount` accepts a second parameter to define the component's state configuration.
+Обратите внимание, что `mount` принимает второй параметр, чтобы определить конфигурацию состояния компонента.
 
-**Example : mounting with component props and a Vue App plugin**
+**Пример: монтирование вместе с `props` компонента и Vue App плагина**
 
 ```js
 const wrapper = mount(Component, {
@@ -61,27 +60,27 @@ const wrapper = mount(Component, {
 
 #### options.global
 
-Among component state, you can configure the aformentioned Vue 3 app by the [`MountingOptions.global` config property.](#global) This would be useful for providing mocked values which your components expect to have available.
+В зависимости от состояния компонента вы можете настроить вышеупомянутое Vue 3 приложение при помощи [`MountingOptions.global` свойства конфига.](#global) Это было бы полезно для предоставления имитируемых данных, которые, как ожидается, будут доступны вашему компоненту.
 
 ::: tip
-If you find yourself having to set common App configuration for many of your tests, then you can set configuration for your entire test suite using the exported [`config` object.](#config)
+Если вы решили настроить общую конфигурацию для многих ваших тестов, тогда вы можете установить конфигурацию для всех ваших тестов, используя экспортированный [`config` объект.](#config)
 :::
 
 ### attachTo
 
-Specify the node to mount the component on. This is not available when using `renderToString`.
+Определяет элемент, на который будет монтироваться компонент. Метод недоступен при использовании `renderToString`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 attachTo?: Element | string
 ```
 
-**Details:**
+**Подробности:**
 
-Can be a valid CSS selector, or an [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) connected to the document.
+Может быть корректным CSS селектором или [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element), связанного с документом.
 
-Note that the component is appended to the node, it doesn't replace the whole content of the node. If you mount the component on the same node in multiple tests - make sure to unmount it after each test by calling `wrapper.unmount()`, this will remove the rendered elements from the node.
+Обратите внимание, что компонент добавлен к узлу, и метод не заменяет все содержимое узла. Если вы монтируете компонент на тот же самый узел в нескольких тестах, убедитесь, что отмонтировали его после каждого теста при помощи вызова `wrapper.unmount()`, он удалит отрисованные элементы.
 
 `Component.vue`:
 
@@ -120,15 +119,15 @@ test('mounts on a specific element', () => {
 
 ### attrs
 
-Sets HTML attributes to component.
+Устанавливает HTML атрибуты для компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 attrs?: Record<string, unknown>
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.spec.js`:
 
@@ -151,7 +150,7 @@ test('attrs', () => {
 })
 ```
 
-Notice that setting a defined prop will always trump an attribute:
+Обратите внимание, что установка `props` имеет больший приоритет, чем атрибут с тем же названием:
 
 ```js
 import { mount } from '@vue/test-utils'
@@ -174,15 +173,15 @@ test('attribute is overridden by a prop with the same name', () => {
 
 ### data
 
-Overrides a component's default `data`. Must be a function.
+Переопределяет `data` компонента. Должно быть функцией:
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`
 
@@ -223,15 +222,15 @@ test('data', () => {
 
 ### props
 
-Sets props on a component when mounted.
+Устанавливает `props` на компонент при монтировании.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 props?: (RawProps & Props) | ({} extends Props ? null : never)
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -271,9 +270,9 @@ test('props', () => {
 
 ### slots
 
-Sets values for slots on a component.
+Устанавливает значения для слотов у компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 type Slot = VNode | string | { render: Function } | Function | Component
@@ -281,9 +280,9 @@ type Slot = VNode | string | { render: Function } | Function | Component
 slots?: { [key: string]: Slot } & { default?: Slot }
 ```
 
-**Details:**
+**Подробности:**
 
-Slots can be a string or any valid component definition either imported from a `.vue` file or provided inline
+Слоты могут быть строкой или любым валидным определением компонента(импортированным из `.vue` файла или предоставленным в inline виде).
 
 `Component.vue`:
 
@@ -326,7 +325,7 @@ test('renders slots content', () => {
 
 ### global
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 type GlobalMountOptions = {
@@ -342,19 +341,19 @@ type GlobalMountOptions = {
 }
 ```
 
-You can configure all the `global` options on both a per test basis and also for the entire test suite. [See here for how to configure project wide defaults](#config-global).
+Вы можете настроить все `global` опции как для каждого теста, так и для всего набора тестов. [Смотрите здесь как настроить сразу все тесты по умолчанию](#config-global).
 
 #### global.components
 
-Registers components globally to the mounted component.
+Регистрирует компоненты глобально для монтированного компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 components?: Record<string, Component | object>
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -406,9 +405,9 @@ test('global.components', () => {
 
 #### global.config
 
-Configures [Vue's application global configuration](https://v3.vuejs.org/api/application-config.html#application-config).
+Настраивает [глобальную конфигурацию Vue приложения](https://v3.vuejs.org/api/application-config.html#application-config).
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 config?: Partial<Omit<AppConfig, 'isNativeTag'>>
@@ -416,15 +415,15 @@ config?: Partial<Omit<AppConfig, 'isNativeTag'>>
 
 #### global.directives
 
-Registers a [directive](https://v3.vuejs.org/api/directives.html#directives) globally to the mounted component.
+Регистрирует [директиву](https://v3.vuejs.org/api/directives.html#directives) глобально для смонтированного компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 directives?: Record<string, Directive>
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.spec.js`:
 
@@ -450,15 +449,15 @@ test('global.directives', () => {
 
 #### global.mixins
 
-Registers a [mixin](https://v3.vuejs.org/guide/mixins.html) globally to the mounted component.
+Регистрирует [mixin](https://v3.vuejs.org/guide/mixins.html) глобально для монтированного компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 mixins?: ComponentOptions[]
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.spec.js`:
 
@@ -477,18 +476,18 @@ test('global.mixins', () => {
 
 #### global.mocks
 
-Mocks a global instance property. Can be used for mocking out `this.$store`, `this.$router` etc.
+Имитирует свойство глобального экземпляра. Может быть использовано для имитации `this.$store`, `this.$router` и т.д.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 mocks?: Record<string, any>
 ```
 
-**Details:**
+**Подробности:**
 
 ::: warning
-This is designed to mock variables injected by third party plugins, not Vue's native properties such as $root, $children, etc.
+Он предоставляет имитацию переменных, добавленных с помощью сторонних плагинов, но не собственные свойства Vue, такие как $root, $children и т.д.
 :::
 
 `Component.vue`:
@@ -536,15 +535,15 @@ test('global.mocks', async () => {
 
 #### global.plugins
 
-Installs plugins on the mounted component.
+Устанавливает плагины на монтированный компонент.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 plugins?: (Plugin | [Plugin, ...any[]])[]
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.spec.js`:
 
@@ -563,7 +562,7 @@ test('global.plugins', () => {
 })
 ```
 
-To use plugin with options, an array of options can be passed.
+Чтобы использовать плагин вместе с опциями, массив опций может быть передан.
 
 `Component.spec.js`:
 
@@ -582,15 +581,15 @@ test('global.plugins with options', () => {
 
 #### global.provide
 
-Provides data to be received in a `setup` function via `inject`.
+Предоставляет данные, которые будут предоставлены в `setup` функции через `inject`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 provide?: Record<any, any>
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -632,7 +631,7 @@ test('global.provide', () => {
 })
 ```
 
-If you are using a ES6 `Symbol` for your provide key, you can use it as a dynamic key:
+Если вы используете ES6 `Symbol` для ключа в provide, вы можете использовать это как динамический ключ:
 
 `Component.spec.js`:
 
@@ -653,17 +652,17 @@ mount(Component, {
 
 #### global.renderStubDefaultSlot
 
-Renders the `default` slot content, even when using `shallow` or `shallowMount`.
+Отрисовывает `default` содерижмое слота, даже при использовании `shallow` или `shallowMount`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 renderStubDefaultSlot?: boolean
 ```
 
-**Details:**
+**Подробности:**
 
-Defaults to **false**.
+По умолчанию **false**.
 
 `Component.vue`
 
@@ -713,21 +712,21 @@ test('global.renderStubDefaultSlot', () => {
 })
 ```
 
-Due to technical limitations, **this behavior cannot be extended to slots other than the default one**.
+Из-за технических ограничений **это поведение не может быть расширено на слоты, отличные от слотов по умолчанию**.
 
 #### global.stubs
 
-Sets a global stub on the mounted component.
+Устанавливает глобальную заглушку на смонтированный компонент.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 stubs?: Record<any, any>
 ```
 
-**Details:**
+**Подробности:**
 
-It stubs `Transition` and `TransitionGroup` by default.
+Заглушка стоит для `Transition` и `TransitionGroup` по умолчанию.
 
 `Component.vue`:
 
@@ -789,17 +788,17 @@ test('global.stubs using a custom component', () => {
 
 ### shallow
 
-Stubs out all child components from the component.
+Заглушка для всех дочерних компонентов из компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 shallow?: boolean
 ```
 
-**Details:**
+**Подробности:**
 
-Defaults to **false**.
+По умолчанию **false**.
 
 `Component.vue`
 
@@ -835,20 +834,20 @@ test('shallow', () => {
 ```
 
 ::: tip
-`shallowMount()` is an alias to mounting a component with `shallow: true`.
+`shallowMount()` это псевдоним для монтирования компонента при помощи `shallow: true`.
 :::
 
-## Wrapper methods
+## Wrapper методы
 
-When you use `mount`, a `VueWrapper` is returned with a number of useful methods for testing. A `VueWrapper` is a thin wrapper around your component instance.
+Когда вы используете `mount`, `VueWrapper` возвращается с рядом полезных функций для тестирования. `VueWrapper` - это небольшая оболочка вокруг вашего экземпляра компонента.
 
-Notice that methods like `find` return a `DOMWrapper`, which is a thin wrapper around the DOM nodes in your component and its children. Both implement a similar API.
+Обратите внимание, что методы, такие как `find`, возвращают `DOMWrapper`, который является небольшой оболочкой вокруг DOM элементов в вашем компоненте и его детей. Оба реализуют схожий API.
 
 ### attributes
 
-Returns attributes on a DOM node.
+Возвращает атрибуты DOM элемента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 attributes(): { [key: string]: string }
@@ -856,7 +855,7 @@ attributes(key: string): string
 attributes(key?: string): { [key: string]: string } | string
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -892,7 +891,7 @@ test('attributes', () => {
 
 ### classes
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 classes(): string[]
@@ -900,9 +899,9 @@ classes(className: string): boolean
 classes(className?: string): string[] | boolean
 ```
 
-**Details:**
+**Подробности:**
 
-Returns an array of classes on an element.
+Возвращает массив классов элемента.
 
 `Component.vue`:
 
@@ -929,9 +928,9 @@ test('classes', () => {
 
 ### emitted
 
-Returns all the emitted events from the Component.
+Возвращает все сгенерированные события из вашего компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 emitted<T = unknown>(): Record<string, T[]>
@@ -939,9 +938,9 @@ emitted<T = unknown>(eventName: string): undefined | T[]
 emitted<T = unknown>(eventName?: string): undefined | T[] | Record<string, T[]>
 ```
 
-**Details:**
+**Подробности:**
 
-The arguments are stored in an array, so you can verify which arguments were emitted along with each event.
+Аргументы хранятся в массиве, поэтому вы можете проверить, какие аргументы были сгенерированы вместе с каждым событием.
 
 `Component.vue`:
 
@@ -965,7 +964,7 @@ import Component from './Component.vue'
 test('emitted', () => {
   const wrapper = mount(Component)
 
-  // wrapper.emitted() equals to { greet: [ ['hello'], ['goodbye'] ] }
+  // wrapper.emitted() вернет { greet: [ ['hello'], ['goodbye'] ] }
 
   expect(wrapper.emitted()).toHaveProperty('greet')
   expect(wrapper.emitted().greet).toHaveLength(2)
@@ -976,17 +975,17 @@ test('emitted', () => {
 
 ### exists
 
-Verify whether an element exists or not.
+Проверяет, существует ли элемент или нет.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 exists(): boolean
 ```
 
-**Details:**
+**Подробности:**
 
-You can use the same syntax `querySelector` implements.
+Вы можете использовать тот же синтаксис по аналогии с `querySelector`
 
 `Component.vue`:
 
@@ -1012,9 +1011,9 @@ test('exists', () => {
 
 ### find
 
-Finds an element and returns a `DOMWrapper` if one is found.
+Находит элемент и возвращает `DOMWrapper`, если он найден.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 find<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>
@@ -1024,14 +1023,13 @@ find(selector: string): DOMWrapper<Element>
 find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;
 ```
 
-**Details:**
+**Подробности:**
 
-You can use the same syntax `querySelector` implements. `find` is basically an alias for `querySelector`. In addition you can search for element refs.
+Вы можете использовать такой же синтаксис, как и с `querySelector`. `find` - это, по сути, псевдоним для `querySelector`. В дополнении, вы можете найти ref элемента.
 
-It is similar to `get`, but `find` returns an ErrorWrapper if an element is not found while [`get`](#get) will throw an error.
-
-As a rule of thumb, always use `find` when you are asserting something doesn't exist. If you are asserting something does exist, use [`get`](#get).
+Он похож на `get`, но `find` вернет ErrorWrapper, если элемент не найден, но [`get`](#get) выбросит ошибку.
 
+Как правило, всегда используйте `find`, когда вы проверяете что-то, что не существует. Если вы проверяете что-то, что существует, используйте [`get`](#get).
 
 `Component.vue`:
 
@@ -1052,18 +1050,18 @@ import Component from './Component.vue'
 test('find', () => {
   const wrapper = mount(Component)
 
-  wrapper.find('span') //=> found; returns DOMWrapper
-  wrapper.find('[data-test="span"]') //=> found; returns DOMWrapper
-  wrapper.find({ ref: 'span' }) //=> found; returns DOMWrapper
-  wrapper.find('p') //=> nothing found; returns ErrorWrapper
+  wrapper.find('span') //=> найдено; вернет DOMWrapper
+  wrapper.find('[data-test="span"]') //=> найдено; вернет DOMWrapper
+  wrapper.find({ ref: 'span' }) //=> найдено; вернет DOMWrapper
+  wrapper.find('p') //=> ничего не найдено; вернет ErrorWrapper
 })
 ```
 
 ### findAll
 
-Similar to `find`, but instead returns an array of `DOMWrapper`.
+Похож на `find`, но вместо этого возвращает массив `DOMWrapper`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 findAll<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>[]
@@ -1072,7 +1070,7 @@ findAll<T extends Element>(selector: string): DOMWrapper<T>[]
 findAll(selector: string): DOMWrapper<Element>[]
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -1093,16 +1091,16 @@ import BaseTable from './BaseTable.vue'
 test('findAll', () => {
   const wrapper = mount(BaseTable)
 
-  // .findAll() returns an array of DOMWrappers
+  // .findAll() вернет массив DOMWrappers
   const thirdRow = wrapper.findAll('span')[2]
 })
 ```
 
 ### findComponent
 
-Finds a Vue Component instance and returns a `VueWrapper` if found. Returns `ErrorWrapper` otherwise.
+Находит экземпляр Vue компонента и вернет `VueWrapper`, если найден. В противном случае вернет `ErrorWrapper`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 findComponent<T extends never>(selector: string): WrapperLike
@@ -1113,16 +1111,16 @@ findComponent<T extends ComponentPublicInstance>(selector: T | FindComponentSele
 findComponent(selector: FindComponentSelector): WrapperLike
 ```
 
-**Details:**
+**Подробности:**
 
-`findComponent` supports several syntaxes:
+`findComponent` поддерживает несколько вариантов:
 
-| syntax         | example                       | details                                                      |
-| -------------- | ----------------------------- | ------------------------------------------------------------ |
-| querySelector  | `findComponent('.component')` | Matches standard query selector.                             |
-| Component name | `findComponent({name: 'a'})`  | matches PascalCase, snake-case, camelCase                    |
-| Component ref  | `findComponent({ref: 'ref'})` | Can be used only on direct ref children of mounted component |
-| SFC            | `findComponent(Component)`    | Pass an imported component directly                          |
+| синтаксис      | пример                        | детали                                                                                                                                                             |
+| -------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| querySelector  | `findComponent('.component')` | Соответствует стандартному селектору запросов (query selector).                                                                                                    |
+| Component name | `findComponent({name: 'a'})`  | Соответствует PascalCase, snake-case, camelCase                                                                                                                    |
+| Component ref  | `findComponent({ref: 'ref'})` | Может использоваться только для прямых ссылок на дочерние элементы смонтированного компонента (т.е. ref должен находится на дочернем компоненте, а не внутри него) |
+| SFC            | `findComponent(Component)`    | Передать импортированный компонент напрямую                                                                                                                        |
 
 `Foo.vue`
 
@@ -1165,7 +1163,7 @@ import Foo from '@/Foo.vue'
 test('findComponent', () => {
   const wrapper = mount(Component)
 
-  // All the following queries would return a VueWrapper
+  // Все следующие запросы вернули бы VueWrapper
 
   wrapper.findComponent('.foo')
   wrapper.findComponent('[data-test="foo"]')
@@ -1179,13 +1177,13 @@ test('findComponent', () => {
 ```
 
 :::warning
-If `ref` in component points to HTML element, `findComponent` will return empty wrapper. This is intended behaviour.
+Если `ref` в компоненте ссылается на HTML элемент, `findComponent` вернет пустую оболочку. Это ожидаемое поведение.
 :::
 
-:::warning Usage with CSS selectors
-Using `findComponent` with CSS selector might have confusing behavior
+:::warning Использование с CSS селекторами
+Использование `findComponent` с CSS селекторами может привести к запутанному поведению
 
-Consider this example:
+Рассмотрите этот пример:
 
 ```js
 const ChildComponent = {
@@ -1198,29 +1196,29 @@ const RootComponent = {
   template: '<child-component class="root" />'
 }
 const wrapper = mount(RootComponent)
-const rootByCss = wrapper.findComponent('.root') // => finds Root
+const rootByCss = wrapper.findComponent('.root') // => нашел Root компонент
 expect(rootByCss.vm.$options.name).toBe('Root')
 const childByCss = wrapper.findComponent('.child')
-expect(childByCss.vm.$options.name).toBe('Root') // => still Root
+expect(childByCss.vm.$options.name).toBe('Root') // => все еще Root компонент
 ```
 
-The reason for such behavior is that `RootComponent` and `ChildComponent` are sharing same DOM node and only first matching component is included for each unique DOM node
+Причина такого поведения в том, что `RootComponent` и `ChildComponent` используют одинаковый DOM узел, и только первый соответствующий компонент включен для каждого уникального DOM узла
 :::
 
-:::info WrapperLike type when using CSS selector
-When using `wrapper.findComponent('.foo')` for example then VTU will return the `WrapperLike` type. This is because functional components
-would need a `DOMWrapper` otherwise a `VueWrapper`. You can force to return a `VueWrapper` by providing the correct component type:
+:::info WrapperLike тип при использовании CSS селектора
+Для примера, при использовании `wrapper.findComponent('.foo')`, VTU вернет `WrapperLike` тип. Дело в том, что функциональному компоненту мог бы потребоваться 
+`DOMWrapper`, иначе `VueWrapper`. Вы можете заставить вернуть `VueWrapper`, указав правильный тип компонента:
 
 ```typescript
-wrapper.findComponent('.foo') // returns WrapperLike
-wrapper.findComponent<typeof FooComponent>('.foo') // returns VueWrapper
-wrapper.findComponent<DefineComponent>('.foo') // returns VueWrapper
+wrapper.findComponent('.foo') // вернет WrapperLike
+wrapper.findComponent<typeof FooComponent>('.foo') // вернет VueWrapper
+wrapper.findComponent<DefineComponent>('.foo') // вернет VueWrapper
 ```
 :::
 
 ### findAllComponents
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 findAllComponents<T extends never>(selector: string): WrapperLike[]
@@ -1232,12 +1230,12 @@ findAllComponents<T extends ComponentPublicInstance>(selector: T | FindAllCompon
 findAllComponents(selector: FindAllComponentsSelector): WrapperLike[]
 ```
 
-**Details:**
+**Подробности:**
 
-Similar to `findComponent` but finds all Vue Component instances that match the query. Returns an array of `VueWrapper`.
+Похож на `findComponent`, но находит все экземпляры Vue компонентов, который совпадают с селектором. Вернет массив `VueWrapper`.
 
 :::warning
-`ref` syntax is not supported in `findAllComponents`. All other query syntaxes are valid.
+`ref` синтаксис не поддерживается в `findAllComponents`. Все остальные синтаксисы запросов будут работать.
 :::
 
 `Component.vue`:
@@ -1259,20 +1257,20 @@ import Component from './Component.vue'
 test('findAllComponents', () => {
   const wrapper = mount(Component)
 
-  // Returns an array of VueWrapper
+  // Вернет массив VueWrapper
   wrapper.findAllComponents('[data-test="number"]')
 })
 ```
 
-:::warning Usage with CSS selectors
-`findAllComponents` has same behavior when used with CSS selector as [findComponent](#findcomponent)
+:::warning Использование с  CSS селекторами
+`findAllComponents` имеет одинаковое поведение при использовании с CSS селектором, как [findComponent](#findcomponent)
 :::
 
 ### get
 
-Gets an element and returns a `DOMWrapper` if found. Otherwise it throws an error.
+Получит элемент и вернет `DOMWrapper`, если найден. В противном случае выбросит ошибку.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 get<K extends keyof HTMLElementTagNameMap>(selector: K): Omit<DOMWrapper<HTMLElementTagNameMap[K]>, 'exists'>
@@ -1281,11 +1279,11 @@ get<T extends Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>
 get(selector: string): Omit<DOMWrapper<Element>, 'exists'>
 ```
 
-**Details:**
+**Подробности:**
 
-It is similar to `find`, but `get` throws an error if an element is not found while [`find`](#find) will return an ErrorWrapper.
+Он похож на `find`, но `get` выбросит ошибку, если элемент не найден, в то время как [`find`](#find) вернет ErrorWrapper.
 
-As a rule of thumb, always use `get` except when you are asserting something doesn't exist. In that case use [`find`](#find).
+Как правило, всегда используйте `get`, исключая, когда вы проверяете что-то, что не существует. В этом случае используйте [`find`](#find).
 
 `Component.vue`:
 
@@ -1304,7 +1302,7 @@ import Component from './Component.vue'
 test('get', () => {
   const wrapper = mount(Component)
 
-  wrapper.get('span') //=> found; returns DOMWrapper
+  wrapper.get('span') //=> найден; вернет DOMWrapper
 
   expect(() => wrapper.get('.not-there')).toThrowError()
 })
@@ -1312,9 +1310,9 @@ test('get', () => {
 
 ### getComponent
 
-Gets a Vue Component instance and returns a `VueWrapper` if found. Otherwise it throws an error.
+Получит экземпляр Vue компонента и вернет `VueWrapper`, если найден. Иначе он выбросит ошибку.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 getComponent<T extends ComponentPublicInstance>(selector: new () => T): Omit<VueWrapper<T>, 'exists'>
@@ -1322,18 +1320,18 @@ getComponent<T extends ComponentPublicInstance>(selector: { name: string } | { r
 getComponent<T extends ComponentPublicInstance>(selector: any): Omit<VueWrapper<T>, 'exists'>
 ```
 
-**Details:**
+**Подробности:**
 
-It is similar to `findComponent`, but `getComponent` throws an error if a Vue Component instance is not found while [`findComponent`](#findComponent) will return an ErrorWrapper.
+Он похож на `findComponent`, но `getComponent`выбросит ошибку, если экземпляр Vue компонента не найден, в том время как [`findComponent`](#findComponent) вернет ErrorWrapper.
 
-**Supported syntax:**
+**Поддерживаемый синтаксис:**
 
-| syntax         | example                      | details                                                      |
-| -------------- | ---------------------------- | ------------------------------------------------------------ |
-| querySelector  | `getComponent('.component')` | Matches standard query selector.                             |
-| Component name | `getComponent({name: 'a'})`  | matches PascalCase, snake-case, camelCase                    |
-| Component ref  | `getComponent({ref: 'ref'})` | Can be used only on direct ref children of mounted component |
-| SFC            | `getComponent(Component)`    | Pass an imported component directly                          |
+| синтаксис      | пример                       | детали                                                                                                                                                             |
+| -------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| querySelector  | `getComponent('.component')` | Соответствует стандартному селектору запросов.                                                                                                                     |
+| Component name | `getComponent({name: 'a'})`  | Соответствует PascalCase, snake-case, camelCase                                                                                                                    |
+| Component ref  | `getComponent({ref: 'ref'})` | Может использоваться только для прямых ссылок на дочерние элементы смонтированного компонента (т.е. ref должен находится на дочернем компоненте, а не внутри него) |
+| SFC            | `getComponent(Component)`    | Передать импортированный компонент напрямую                                                                                                                        |
 
 `Foo.vue`
 
@@ -1376,8 +1374,8 @@ import Foo from '@/Foo.vue'
 test('getComponent', () => {
   const wrapper = mount(Component)
 
-  wrapper.getComponent({ name: 'foo' }) // returns a VueWrapper
-  wrapper.getComponent(Foo) // returns a VueWrapper
+  wrapper.getComponent({ name: 'foo' }) // вернет VueWrapper
+  wrapper.getComponent(Foo) // вернет VueWrapper
 
   expect(() => wrapper.getComponent('.not-there')).toThrowError()
 })
@@ -1385,19 +1383,18 @@ test('getComponent', () => {
 
 ### html
 
-Returns the HTML of an element.
+Вернет HTML элемента.
 
-By default the output is formatted with [`js-beautify`](https://github.com/beautify-web/js-beautify)
-to make snapshots more readable. Use `raw: true` option to receive the unformatted html string.
+По умолчанию результат форматируется при помощи [`js-beautify`](https://github.com/beautify-web/js-beautify), чтобы сделать снапшоты более читабельными. Используйте `raw: true` опцию, чтобы получить неформатированную html строку.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 html(): string
 html(options?: { raw?: boolean }): string
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -1430,18 +1427,18 @@ test('html', () => {
 
 ### isVisible
 
-Verify whether an element is visible or not.
+Проверяет является ли элемент видимым или нет.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 isVisible(): boolean
 ```
 
-**Details:**
+**Подробности:**
 
 ::: warning
-`isVisible()` only works correctly if the wrapper is attached to the DOM using [`attachTo`](#attachTo)
+`isVisible()` работает корректно, только если оболочка прикреплена к DOM, используя [`attachTo`](#attachTo)
 :::
 
 ```js
@@ -1460,9 +1457,9 @@ test('isVisible', () => {
 
 ### props
 
-Returns props passed to a Vue Component.
+Возвращает `props`, переданные в Vue компонент.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 props(): { [key: string]: any }
@@ -1470,7 +1467,7 @@ props(selector: string): any
 props(selector?: string): { [key: string]: any } | any
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -1524,25 +1521,25 @@ test('props', () => {
 ```
 
 :::tip
-As a rule of thumb, test against the effects of a passed prop (a DOM update, an emitted event, and so on). This will make tests more powerful than simply asserting that a prop is passed.
+Как правило, проверяйте влияние переданного `prop` (DOM обновление, сгенерированное событие и так далее). Это сделает тесты более мощными, чем просто проверка того, что `prop` был передан.
 :::
 
 ### setData
 
-Updates component internal data.
+Обновляет внутреннее свойство `data` у компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 setData(data: Record<string, any>): Promise<void>
 ```
 
-**Details:**
+**Подробности:**
 
-`setData` does not allow setting new properties that are not defined in the component.
+`setData` не позволяет установить новые поля, которые не были определены в компоненте.
 
 ::: warning
-Also, notice that `setData` does not modify composition API `setup()` data.
+А также, обратите внимание, что`setData` не изменяет composition API `setup()` данные.
 :::
 
 `Component.vue`:
@@ -1580,20 +1577,20 @@ test('setData', async () => {
 ```
 
 ::: warning
-You should use `await` when you call `setData` to ensure that Vue updates the DOM before you make an assertion.
+Вы должны использовать `await`, когда вызываете `setData`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
 :::
 
 ### setProps
 
-Updates component props.
+Обновляет `props` компонента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 setProps(props: Record<string, any>): Promise<void>
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -1631,25 +1628,25 @@ test('updates prop', async () => {
 ```
 
 ::: warning
-You should use `await` when you call `setProps` to ensure that Vue updates the DOM before you make an assertion.
+Вы должны использовать `await`, когда вызываете `setProps`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
 :::
 
 ### setValue
 
-Sets a value on DOM element. Including:
+Устанавливает значение на DOM элементе. Включая:
 
 - `<input>`
-  - `type="checkbox"` and `type="radio"` are detected and will have `element.checked` set.
+  - `type="checkbox"` и `type="radio"` обрабатываются и установится в `element.checked`.
 - `<select>`
-  - `<option>` is detected and will have `element.selected` set.
+  - `<option>` обрабатывается и установится в `element.selected`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 setValue(value: unknown, prop?: string): Promise<void>
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -1707,28 +1704,28 @@ test('setValue on input text', async () => {
 test('setValue on multi select', async () => {
   const wrapper = mount(Component)
 
-  // For select without multiple
+  // Для select без множественного выбора
   await wrapper.find('select').setValue('value1')
-  // For select with multiple
+  // Для select с множественным выбором
   await wrapper.find('select').setValue(['value1', 'value3'])
 })
 ```
 
 ::: warning
-You should use `await` when you call `setValue` to ensure that Vue updates the DOM before you make an assertion.
+Вы должны использовать `await`, когда вызываете `setValue`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
 :::
 
 ### text
 
-Returns the text content of an element.
+Возвращает текст элемента.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 text(): string
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -1753,9 +1750,9 @@ test('text', () => {
 
 ### trigger
 
-Triggers a DOM event, for example `click`, `submit` or `keyup`.
+Вызывает DOM событие, например `click`, `submit` или `keyup`.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 interface TriggerOptions {
@@ -1768,7 +1765,7 @@ interface TriggerOptions {
 trigger(eventString: string, options?: TriggerOptions | undefined): Promise<void>
 ```
 
-**Details:**
+**Подробности:**
 
 `Component.vue`:
 
@@ -1804,35 +1801,35 @@ test('trigger', async () => {
 })
 ```
 
-Note that `trigger` accepts a second argument to pass options to the triggered Event:
+Обратите внимание, что `trigger` принимает второй аргумент, чтобы передать параметры в вызываемое событие:
 
 ```js
 await wrapper.trigger('keydown', { keyCode: 65 })
 ```
 
 ::: warning
-You should use `await` when you call `trigger` to ensure that Vue updates the DOM before you make an assertion.
+Вы должны использовать `await`, когда вызываете `trigger`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
 :::
 
 ::: warning
-Some events, like clicking on a checkbox to change its `v-model`,
-will only work if the test uses `attachTo: document.body`.
-Otherwise, the `change` event will not be triggered, and the `v-model` value does not change.
+Некоторые события, например, нажатие на чекбокс изменяет его `v-model`, 
+будет работать только, если тест использует `attachTo: document.body`. 
+Иначе `change` событие не будет вызвано и `v-model` значение не изменится.
 :::
 
 ### unmount
 
-Unmount the application from the DOM.
+Размонтирует(удаляет) приложение из DOM.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 unmount(): void
 ```
 
-**Details:**
+**Подробности:**
 
-It only works on the root `VueWrapper` returned from `mount`. Useful for manual clean-up after tests.
+Работает только на корневом `VueWrapper`, возвращаемый из `mount`. Полезный для ручной очистки после тестов.
 
 `Component.vue`:
 
@@ -1856,8 +1853,8 @@ test('unmount', () => {
   const wrapper = mount(Component)
 
   wrapper.unmount()
-  // Component is removed from DOM.
-  // console.log has been called with 'unmounted!'
+  // Компонент удален из DOM.
+  // console.log вызвался с 'unmounted!'
 })
 ```
 
@@ -1865,27 +1862,27 @@ test('unmount', () => {
 
 ### vm
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 vm: ComponentPublicInstance
 ```
 
-**Details:**
+**Подробности:**
 
-The `Vue` app instance. You can access all of the [instance methods](https://v3.vuejs.org/api/instance-methods.html) and [instance properties](https://v3.vuejs.org/api/instance-properties.html).
+`Vue` экземпляр. Вы можете получить доступ ко всем [методам экземпляра](https://v3.vuejs.org/api/instance-methods.html) и [свойствам экземпляра](https://v3.vuejs.org/api/instance-properties.html).
 
-Notice that `vm` is only available on a `VueWrapper`.
+Обратите внимание, что `vm` доступен только на `VueWrapper`.
 
 :::tip
-As a rule of thumb, test against the effects of a passed prop (a DOM update, an emitted event, and so on). This will make tests more powerful than simply asserting that a prop is passed.
+Как правило, проверяйте влияние переданного `prop` (DOM обновление, сгенерированное событие и так далее). Это сделает тесты более мощными, чем просто проверка того, что `prop` был передан.
 :::
 
 ## shallowMount
 
-Creates a Wrapper that contains the mounted and rendered Vue component to test with all children stubbed out.
+Создает оболочку, которая содержит смонтированный и отрисованный Vue компонент для тестирования всех дочерних компонентов в виде заглушек.
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 interface MountingOptions<Props, Data = {}> {
@@ -1900,23 +1897,23 @@ interface MountingOptions<Props, Data = {}> {
 function shallowMount(Component, options?: MountingOptions): VueWrapper
 ```
 
-**Details:**
+**Подробности:**
 
-`shallowMount` behaves exactly like `mount`, but it stubs all child components by default. Essentially, `shallowMount(Component)` is an alias of `mount(Component, { shallow: true })`.
+`shallowMount` ведет себя практически, также как `mount`, но ставит заглушку на все дочерние компоненты по умолчанию. По сути `shallowMount(Component)` это псевдоним для `mount(Component, { shallow: true })`.
 
 ## enableAutoUnmount
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 enableAutoUnmount(hook: (callback: () => void) => void);
 disableAutoUnmount(): void;
 ```
 
-**Details:**
+**Подробности:**
 
-`enableAutoUnmount` allows to automatically destroy Vue wrappers. Destroy logic is passed as callback to `hook` Function.
-Common usage is to use `enableAutoUnmount` with teardown helper functions provided by your test framework, such as `afterEach`:
+`enableAutoUnmount` позволяет автоматически уничтожить Vue оболочки. Логика уничтожения передается как обратный вызов в `hook` функцию.
+Распространенное использование - это использование `enableAutoUnmount` с вспомогательными функциями демонтирования, предоставленных вашим фреймворком тестирования, такой как `afterEach`:
 
 ```ts
 import { enableAutoUnmount } from '@vue/test-utils'
@@ -1924,27 +1921,27 @@ import { enableAutoUnmount } from '@vue/test-utils'
 enableAutoUnmount(afterEach)
 ```
 
-`disableAutoUnmount` might be useful if you want this behavior only in specific subset of your test suite and you want to explicitly disable this behavior
+`disableAutoUnmount` может быть полезным, если вы хотите такое поведение только в определенным подмножествам тестов, и вы хотите явно отключить такое поведение.
 
 ## flushPromises
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 flushPromises(): Promise<unknown>
 ```
 
-**Details:**
+**Подробности:**
 
-`flushPromises` flushes all resolved promise handlers. This helps make sure async operations such as promises or DOM updates have happened before asserting against them.
+`flushPromises` выполняет все разрешенные обработчики промисов. Это помогает убедиться в том, что асинхронные операции, такие как промисы или обновление DOM случаются перед их проверкой.
 
-Check out [Making HTTP requests](../guide/advanced/http-requests.md) to see an example of `flushPromises` in action.
+Посмотрите [Выполнение HTTP запросов](/ru/guide/advanced/http-requests.md), чтобы увидеть пример `flushPromises` в действии.
 
 ## config
 
 ### config.global
 
-**Signature:**
+**Сигнатура:**
 
 ```ts
 type GlobalMountOptions = {
@@ -1960,13 +1957,13 @@ type GlobalMountOptions = {
 }
 ```
 
-**Details:**
+**Подробности:**
 
-Instead of configuring mounting options on a per test basis, you can configure them for your entire test suite. These will be used by default every time you `mount` a component. If desired, you can then override your defaults on a per test basis.
+Вместо настройки опций монтирования на каждом тесте, вы можете настроить их для всего набора тестов. Они будут использоваться по умолчанию каждый раз, когда вы монтируете компонент. При желании вы можете переопределить ваши значения по умолчанию для каждого теста.
 
-**Example :**
+**Пример:**
 
-An example might be globally mocking the `$t` variable from vue-i18n and a component:
+Примером может быть глобальная имитация `$t` переменной из vue-i18n и компонента:
 
 `Component.vue`:
 
@@ -2013,20 +2010,20 @@ test('config.global mocks and stubs', () => {
 ```
 
 ::: tip
-Remember that this behavior is global, not on a mount by mount basis. You might need to enable/disable it before and after each test.
+Помните, что это глобальное поведение, а не для каждого теста отдельно. Возможно, вам придется включать/выключать их до и после каждого теста.
 :::
 
-## components
+## компоненты
 
 ### RouterLinkStub
 
-A component to stub the Vue Router `router-link` component when you don't want to mock or include a full router.
+Компонент для заглушки Vue Router `router-link` компонента, когда вы не хотите имитировать или добавлять весь роутер.
 
-You can use this component to find a `router-link` component in the render tree.
+Вы можете использовать этот компонент, чтобы найти `router-link` компонент в дереве рендеринга (render tree).
 
-**Usage:**
+**Использование:**
 
-Set as a stub in the mounting options:
+Установить как заглушку в опциях монтирования:
 ```js
 import { mount, RouterLinkStub } from '@vue/test-utils'
 
@@ -2041,6 +2038,6 @@ const wrapper = mount(Component, {
 expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path')
 ```
 
-**Usage with slot:**
+**Использование со слотом:**
 
-The `RouterLinkStub` component supports slot content and will return very basic values for its slot props. If you need more specific slot prop values for your tests, consider using a [real router](../guide/advanced/vue-router.html#using-a-real-router) so you can use a real `router-link` component. Alternatively, you can define your own `RouterLinkStub` component by copying the implementation from the test-utils package.
+`RouterLinkStub` компонент поддерживает содержимое слота и вернет очень базовое значение для его свойств слота. Если вам нужны более специфические значения свойств слота для ваших тестов, рассмотрите использование [настоящего роутера](/ru/guide/advanced/vue-router.html#using-a-real-router), чтобы вы могли использовать `router-link` компонент. Как альтернатива, вы можете определить ваш собственный `RouterLinkStub` компонент с помощью копирования реализации из test-utils пакета.
diff --git a/docs/ru/guide/advanced/component-instance.md b/docs/ru/guide/advanced/component-instance.md
index 28622d873..136dcecd1 100644
--- a/docs/ru/guide/advanced/component-instance.md
+++ b/docs/ru/guide/advanced/component-instance.md
@@ -1,10 +1,10 @@
 # Экземпляр компонента
 
-[`mount`](/api/#mount) возвращает `VueWrapper` с множеством удобных методов для тестирования Vue компонентов. Иногда вы можете захотеть получить доступ к Vue экземпляру. Вы можете получить доступ к нему с помощью `vm` свойства.
+[`mount`](/ru/api/#mount) возвращает `VueWrapper` с множеством удобных методов для тестирования Vue компонентов. Иногда вы можете захотеть получить доступ к Vue экземпляру. Вы можете получить доступ к нему с помощью `vm` свойства.
 
 ## Простой пример
 
-Здесь простой компонент, который объединяет props и data для отрисовки приветствия
+Здесь простой компонент, который объединяет `props` и `data` для отрисовки приветствия
 
 ```ts
 test('renders a greeting', () => {
@@ -65,7 +65,7 @@ test('asserts correct props are passed', () => {
 })
 ```
 
-Для более тщательного способа протестировать это, могла бы стать проверка отрисованного содержимого. Это значит, что вы проверяете, что правильный prop передан *и* отрисован.
+Для более тщательного способа протестировать это, могла бы стать проверка отрисованного содержимого. Это значит, что вы проверяете, что правильный `prop` передан *и* отрисован.
 
 
 :::warning WrapperLike тип при использовании CSS селектора
diff --git a/docs/ru/guide/advanced/reusability-composition.md b/docs/ru/guide/advanced/reusability-composition.md
index 6ffba6e45..448e5a3b1 100644
--- a/docs/ru/guide/advanced/reusability-composition.md
+++ b/docs/ru/guide/advanced/reusability-composition.md
@@ -93,7 +93,7 @@ test('fetch user on mount', async () => {
 
 ## Provide / inject
 
-Vue предоставляет возможность передать props во все дочерние компоненты при помощи `provide` и `inject`. Лучший вариант протестировать это поведение - это протестировать все дерево (родитель + дети). Но иногда это невозможно, потому что дерево слишком сложное, либо вы хотите только протестировать один composable.
+Vue предоставляет возможность передать `props` во все дочерние компоненты при помощи `provide` и `inject`. Лучший вариант протестировать это поведение - это протестировать все дерево (родитель + дети). Но иногда это невозможно, потому что дерево слишком сложное, либо вы хотите только протестировать один composable.
 
 ### Тестирование `provide`
 
diff --git a/docs/ru/guide/advanced/teleport.md b/docs/ru/guide/advanced/teleport.md
index 7a4310cd8..95fcfc4eb 100644
--- a/docs/ru/guide/advanced/teleport.md
+++ b/docs/ru/guide/advanced/teleport.md
@@ -5,7 +5,7 @@ Vue 3 предоставляет новый встроенный компоне
 Вот несколько стратегий и техник для тестирования компонентов, используя `<Teleport>`.
 
 ::: tip
-Если вы хотите протестировать остальную часть вашего компонента, игнорируя `teleport`, вы можете поставить заглушку на `teleport`, передав `teleport: true` в [global stubs option](../../api/#global-stubs).
+Если вы хотите протестировать остальную часть вашего компонента, игнорируя `teleport`, вы можете поставить заглушку на `teleport`, передав `teleport: true` в [global stubs option](/ru/api/#global-stubs).
 :::
 
 ## Пример
diff --git a/docs/ru/guide/advanced/transitions.md b/docs/ru/guide/advanced/transitions.md
index 161e293ea..f5215f63f 100644
--- a/docs/ru/guide/advanced/transitions.md
+++ b/docs/ru/guide/advanced/transitions.md
@@ -63,7 +63,7 @@ test('works with transitions', async () => {
 
 ::: tip
 Возможные решения:
-- Вы можете выключить заглушку по умолчанию, установив [global stubs transition](../../api/#global-stubs) в false значение
+- Вы можете выключить заглушку по умолчанию, установив [global stubs transition](/ru/api/#global-stubs) в false значение
 - Вы можете создать свою собственную заглушку перехода, которая может обработать эти хуки, если необходимо.
 - Вы можете отследить предупреждения в тесте и отключить их.
 :::
diff --git a/docs/ru/guide/essentials/conditional-rendering.md b/docs/ru/guide/essentials/conditional-rendering.md
index 7c7f497b9..c71f2f04f 100644
--- a/docs/ru/guide/essentials/conditional-rendering.md
+++ b/docs/ru/guide/essentials/conditional-rendering.md
@@ -48,9 +48,9 @@ test('renders a profile link', () => {
 })
 ```
 
-Если `get()` не вернет элемент, который совпадает по селектору, он вызовет ошибку, и твои тесты не пройдут. `get()` вернет `DOMWrapper`, если элемент найден. `DOMWrapper` - это небольшая обертка вокруг DOM элемента, который реализует [Wrapper API](/api/#Wrapper-methods) - вот почему мы можем сделать `profileLink.text()` и получить текст. Ты можешь получить исходный элемент, используя `element` свойство.
+Если `get()` не вернет элемент, который совпадает по селектору, он вызовет ошибку, и твои тесты не пройдут. `get()` вернет `DOMWrapper`, если элемент найден. `DOMWrapper` - это небольшая обертка вокруг DOM элемента, который реализует [Wrapper API](/ru/api/#Wrapper-methods) - вот почему мы можем сделать `profileLink.text()` и получить текст. Ты можешь получить исходный элемент, используя `element` свойство.
 
-Есть другой тип обертки - `VueWrapper` - который возвращает [`getComponent`](/api/#getComponent), работающий таким же образом.
+Есть другой тип обертки - `VueWrapper` - который возвращает [`getComponent`](/ru/api/#getComponent), работающий таким же образом.
 
 ## Использование `find()` и `exists()`
 
@@ -67,11 +67,11 @@ test('does not render an admin link', () => {
 })
 ```
 
-Обратите внимание, мы вызываем `exists()` на значении, вернувшегося от `.find()`. `find()` похож на `mount()`, также возвращает `wrapper`. `mount()` имеет несколько дополнительных методов, потому что он оборачивает Vue компонент, и `find()` только возвращает обычный DOM элемент, но многие методы общие для них. Некоторые другие методы включая `classes()`, который получает список классов DOM элемента, и `trigger()` для имитации действий пользователя. Ты можешь найти список доступных методов [здесь](/api/#Wrapper-methods).
+Обратите внимание, мы вызываем `exists()` на значении, вернувшегося от `.find()`. `find()` похож на `mount()`, также возвращает `wrapper`. `mount()` имеет несколько дополнительных методов, потому что он оборачивает Vue компонент, и `find()` только возвращает обычный DOM элемент, но многие методы общие для них. Некоторые другие методы включая `classes()`, который получает список классов DOM элемента, и `trigger()` для имитации действий пользователя. Ты можешь найти список доступных методов [здесь](/ru/api/#Wrapper-methods).
 
 ## Использование `data`
 
-Последний тест - это проверить, что ссылка на администратора отображается, когда `admin` равен `true`. Значение `false` по умолчанию, но мы можем переопределить, используя второй аргумент в `mount()`, [`mounting options`](/api/#mount).
+Последний тест - это проверить, что ссылка на администратора отображается, когда `admin` равен `true`. Значение `false` по умолчанию, но мы можем переопределить, используя второй аргумент в `mount()`, [`mounting options`](/ru/api/#mount).
 
 Для `data`, мы можем использовать опцию с подходящим названием `data`:
 
@@ -93,7 +93,7 @@ test('renders an admin link', () => {
 
 Если у тебя есть другие поля в `data`, не беспокойся - Vue Test Utils объединит их в один. `data` опция монтирования будет всегда выше по приоритету, чем другие стандартные значения.
 
-Чтобы изучить какие другие опции монтирования существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/api/#mount).
+Чтобы изучить какие другие опции монтирования существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/ru/api/#mount).
 
 ## Проверка видимости элемента
 
diff --git a/docs/ru/guide/essentials/easy-to-test.md b/docs/ru/guide/essentials/easy-to-test.md
index d8fa09325..3ceaf10b2 100644
--- a/docs/ru/guide/essentials/easy-to-test.md
+++ b/docs/ru/guide/essentials/easy-to-test.md
@@ -105,7 +105,7 @@ test('text updates on clicking', async () => {
 Обычно, ты выполняешь несколько HTTP запросов в вашем приложении. С точки зрения тестирования, HTTP запросы предоставляют входные данные в компоненты, и компоненты могут также отправлять HTTP запросы.
 
 :::tip
-Ознакомьтесь с [Создание HTTP запросов](../advanced/http-requests.md) руководством, если ты не знаком с тестированием API вызовов.
+Ознакомьтесь с [Создание HTTP запросов](/ru/guide/advanced/http-requests.md) руководством, если ты не знаком с тестированием API вызовов.
 :::
 
 ### Извлечение сложных методов
@@ -122,4 +122,4 @@ test('text updates on clicking', async () => {
 
 Ты не сможешь написать нетестируемый код, если ты напишешь тесты заранее!
 
-Наш [Ускоренный курс](../essentials/a-crash-course.md) предлагает пример, как написание тестов до написания кода, приводит к созданию тестируемых компонентов. Он также поможет тебе обнаружить и протестировать крайние случаи.
+Наш [Ускоренный курс](/ru/guide/essentials/a-crash-course.md) предлагает пример, как написание тестов до написания кода, приводит к созданию тестируемых компонентов. Он также поможет тебе обнаружить и протестировать крайние случаи.
diff --git a/docs/ru/guide/essentials/forms.md b/docs/ru/guide/essentials/forms.md
index d98571fe9..330bd0932 100644
--- a/docs/ru/guide/essentials/forms.md
+++ b/docs/ru/guide/essentials/forms.md
@@ -226,7 +226,7 @@ test('submits the form', async () => {
 
 #### Нативная отправка формы
 
-Вызов `submit` события на `<form>` элементе имитирует поведение браузера во время отправки формы. Если мы хотим вызвать отправку формы более нативно, мы могли бы вместо этого вызвать `click` событие на кнопке отправки. Поскольку элементы формы, не связанные с `document`, не могут быть отправлены, в соответствии с [HTML спецификацией](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm), нам нужно использовать [`attachTo`](/api/#attachTo), чтобы привязать элементы.
+Вызов `submit` события на `<form>` элементе имитирует поведение браузера во время отправки формы. Если мы хотим вызвать отправку формы более нативно, мы могли бы вместо этого вызвать `click` событие на кнопке отправки. Поскольку элементы формы, не связанные с `document`, не могут быть отправлены, в соответствии с [HTML спецификацией](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm), нам нужно использовать [`attachTo`](/ru/api/#attachTo), чтобы привязать элементы.
 
 #### Несколько модификаторов на одном событии
 
diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
index 15d566b28..39cd9de0d 100644
--- a/docs/ru/guide/index.md
+++ b/docs/ru/guide/index.md
@@ -47,13 +47,13 @@ Vue Test Utils это небольшая библиотека. Для созда
 
 ## Что дальше? 
 
-Чтобы увидеть Vue Test Utils в действии, [попробовать ускоренный курс](../guide/essentials/a-crash-course.md), где мы создали простое Todo приложение, используя подход "сначала тест, потом реализация".
+Чтобы увидеть Vue Test Utils в действии, [попробовать ускоренный курс](/ru/guide/essentials/a-crash-course.md), где мы создали простое Todo приложение, используя подход "сначала тест, потом реализация".
 
 Документация разделена на 2 главных раздела:
 
 - **Основы**, покрывает основные случаи использования, с которыми вы столкнетесь, при тестировании Vue компонентов.
 - **Углубленно**, исследует продвинутые возможности библиотеки.
 
-Вы также можете изучить полную [API](/api/).
+Вы также можете изучить полную [API](/ru/api/).
 
 В качестве альтернативы, если вы предпочитаете изучать по видео, тут есть [плейлист с лекциями](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA).

From 94dedf74bb4a466726fc0820d8881aff3edd9e49 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Tue, 21 Jan 2025 12:30:22 +0300
Subject: [PATCH 19/38] add `plugin` page

---
 docs/.vitepress/config/ru.mts          |   8 +-
 docs/ru/guide/extending-vtu/plugins.md | 179 +++++++++++++++++++++++++
 2 files changed, 183 insertions(+), 4 deletions(-)
 create mode 100644 docs/ru/guide/extending-vtu/plugins.md

diff --git a/docs/.vitepress/config/ru.mts b/docs/.vitepress/config/ru.mts
index 932fafd36..c61e9d266 100644
--- a/docs/.vitepress/config/ru.mts
+++ b/docs/.vitepress/config/ru.mts
@@ -26,7 +26,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
     nav: [
       { text: 'Руководство', link: '/ru/guide/' },
       { text: 'API', link: '/ru/api/' },
-      { text: 'Миграция с Vue 2', link: '/migration/' },
+      { text: 'Миграция с Vue 2', link: '/ru/migration/' },
       {
         text: 'Changelog',
         link: 'https://github.com/vuejs/test-utils/releases'
@@ -103,7 +103,7 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         {
           text: 'Дополнительные темы',
           items: [
-            { text: 'Плагины', link: '/guide/extending-vtu/plugins' },
+            { text: 'Плагины', link: '/ru/guide/extending-vtu/plugins' },
             {
               text: 'Сообщество и обучение',
               link: '/ru/guide/extending-vtu/community-learning'
@@ -112,11 +112,11 @@ export const ruConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         },
         {
           text: 'Ответы на вопросы',
-          link: '/guide/faq/'
+          link: '/ru/guide/faq/'
         },
         {
           text: 'Миграция с Vue 2',
-          link: '/migration/'
+          link: '/ru/migration/'
         },
         {
           text: 'API руководство',
diff --git a/docs/ru/guide/extending-vtu/plugins.md b/docs/ru/guide/extending-vtu/plugins.md
new file mode 100644
index 000000000..5f3572706
--- /dev/null
+++ b/docs/ru/guide/extending-vtu/plugins.md
@@ -0,0 +1,179 @@
+# Плагины
+
+Плагины добавляют функциональность глобального уровня для Vue Test Utils' API. Это официальный способ расширить Vue Test Utils' API при помощи пользовательской логики, методов или функциональности.
+
+Некоторые варианты использования плагинов:
+
+1. Псевдонимы для существующих доступных методов
+2. Прикрепить средства сопоставления к экземпляру оболочки
+3. Прикрепить функциональность к оболочке
+
+## Оболочка плагина
+
+### Использование плагина
+
+Установите плагины, вызвав `config.plugins.VueWrapper.install()` метод. Это должно быть сделано перед тем, как вы вызовите `mount`.
+
+`install()` метод получит экземпляр `WrapperAPI`, содержащий доступные и закрытые свойства экземпляра.
+
+```js
+// setup.js файл
+import { config } from '@vue/test-utils'
+
+// Локально написанный плагин, смотрите "Writing a Plugin"
+import MyPlugin from './myPlugin'
+
+// Установить плагин в VueWrapper
+config.plugins.VueWrapper.install(MyPlugin)
+```
+
+Вы можете, по желанию, передать некоторые параметры:
+
+```js
+config.plugins.VueWrapper.install(MyPlugin, { someOption: true })
+```
+
+Ваш плагин должен быть установлен один раз. Если вы используете Jest, это должно быть сделано в вашем Jest `setupFiles` или `setupFilesAfterEnv` конфиг файле.
+
+Некоторые плагины автоматически вызывают `config.plugins.VueWrapper.install()`, когда их импортируют. Это распространено, если они расширяют несколько интерфейсов одновременно. Следуйте инструкциям плагина, который вы используете.
+
+Посмотрите [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) или [awesome-vue](https://github.com/vuejs/awesome-vue#test) для коллекции плагинов и библиотек, предоставленных сообществом.
+
+### Написание плагина
+
+Vue Test Utils плагин - это просто функция, которая получает смонтированный `VueWrapper` или `DOMWrapper` экземпляр и может модифицировать его.
+
+#### Базовый плагин
+
+Ниже указан простой плагин для добавления удобного псевдонима для соответствия `wrapper.element` к `wrapper.$el`
+
+```js
+// setup.js
+import { config } from '@vue/test-utils'
+
+const myAliasPlugin = (wrapper) => {
+  return {
+    $el: wrapper.element // простые псевдонимы
+  }
+}
+
+// Вызовите установку для типа, который вы хотите расширить
+// Вы можете написать плагин для любого значения внутри config.plugins
+config.plugins.VueWrapper.install(myAliasPlugin)
+```
+
+И в вашем тесте вы можете использовать ваш плагин после `mount`.
+
+```js
+// component.spec.js
+const wrapper = mount({ template: `<h1>🔌 Plugin</h1>` })
+console.log(wrapper.$el.innerHTML) // 🔌 Plugin
+```
+
+#### Data Test ID Плагин
+
+Ниже плагин добавляет метод `findByTestId` к `VueWrapper` экземпляру. Это поощряет использование стратегию селекторов, полагающихся только на тестовые атрибуты в ваших Vue компонентах.
+
+Использование:
+
+`MyComponent.vue`:
+
+```vue
+<template>
+  <MyForm class="form-container" data-testid="form">
+    <MyInput data-testid="name-input" v-model="name" />
+  </MyForm>
+</template>
+```
+
+`MyComponent.spec.js`:
+
+```js
+const wrapper = mount(MyComponent)
+wrapper.findByTestId('name-input') // возвращает VueWrapper или DOMWrapper
+```
+
+Реализация плагина:
+
+```js
+import { config, DOMWrapper} from '@vue/test-utils'
+
+const DataTestIdPlugin = (wrapper) => {
+  function findByTestId(selector) {
+    const dataSelector = `[data-testid='${selector}']`
+    const element = wrapper.element.querySelector(dataSelector)
+    return new DOMWrapper(element)
+  }
+
+  return {
+    findByTestId
+  }
+}
+
+config.plugins.VueWrapper.install(DataTestIdPlugin)
+```
+
+## Stubs Plugin
+
+`config.plugins.createStubs` позволяет перезаписать стандартное создание заглушек, предоставляемое VTU.
+
+Некоторые варианты использования:
+* Вы хотите добавить больше логики в заглушки (например, именованные слоты)
+* Вы хотите использовать различные заглушки для различных компонентов (например, заглушки для компонентов из библиотеки)
+
+### Использование
+
+```typescript
+config.plugins.createStubs = ({ name, component }) => {
+  return defineComponent({
+    render: () => h(`custom-${name}-stub`)
+  })
+}
+```
+
+Это функция будет вызвана каждый раз, когда VTU генерирует заглушку либо из
+```typescript
+const wrapper = mount(Component, {
+  global: {
+    stubs: {
+      ChildComponent: true
+    }
+  }
+})
+```
+
+либо
+
+```typescript
+const wrapper = shallowMount(Component)
+```
+
+Но не будет вызвана, когда вы явно укажете заглушку
+
+```typescript
+const wrapper = mount(Component, {
+  global: {
+    stubs: {
+      ChildComponent: { template: '<child-stub/>' }
+    }
+  }
+})
+```
+
+## Использование плагина с TypeScript
+
+Для использования вашего пользовательского плагина с [TypeScript](https://www.typescriptlang.org/) вам нужно объявить вашу пользовательскую функцию. Следовательно, добавьте файл, названный `vue-test-utils.d.ts`, с следующим содержимым:
+
+```typescript
+import { DOMWrapper } from '@vue/test-utils';
+
+declare module '@vue/test-utils' {
+  interface VueWrapper {
+    findByTestId(testId: string): DOMWrapper[];
+  }
+}
+```
+
+## Опубликуйте ваш плагин
+
+Если вам не хватает возможностей, рассмотрите написание плагина для расширения Vue Test Utils и опубликуйте его в [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) или [awesome-vue](https://github.com/vuejs/awesome-vue#test).

From fde0982fbd45873c0f1be88aee605e306b97fb77 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Wed, 22 Jan 2025 10:48:56 +0300
Subject: [PATCH 20/38] add `faq` page

---
 docs/ru/guide/extending-vtu/plugins.md |  4 +--
 docs/ru/guide/faq/index.md             | 34 ++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 docs/ru/guide/faq/index.md

diff --git a/docs/ru/guide/extending-vtu/plugins.md b/docs/ru/guide/extending-vtu/plugins.md
index 5f3572706..e1cb4cfa8 100644
--- a/docs/ru/guide/extending-vtu/plugins.md
+++ b/docs/ru/guide/extending-vtu/plugins.md
@@ -20,7 +20,7 @@
 // setup.js файл
 import { config } from '@vue/test-utils'
 
-// Локально написанный плагин, смотрите "Writing a Plugin"
+// Локально написанный плагин, смотрите "Написание плагина"
 import MyPlugin from './myPlugin'
 
 // Установить плагин в VueWrapper
@@ -113,7 +113,7 @@ const DataTestIdPlugin = (wrapper) => {
 config.plugins.VueWrapper.install(DataTestIdPlugin)
 ```
 
-## Stubs Plugin
+## Пользовательская заглушка для плагина
 
 `config.plugins.createStubs` позволяет перезаписать стандартное создание заглушек, предоставляемое VTU.
 
diff --git a/docs/ru/guide/faq/index.md b/docs/ru/guide/faq/index.md
new file mode 100644
index 000000000..d3a6e3e49
--- /dev/null
+++ b/docs/ru/guide/faq/index.md
@@ -0,0 +1,34 @@
+# Ответы на вопросы
+
+[[toc]]
+
+## Имитация даты и таймера при помощи Vitest
+
+Vue планировщик зависит от системного времени. Убедитесь, что смонтировали компоненты
+*после* вызова `vi.setSystemTime`, поскольку Vue зависит от его побочных эффектов.
+Монтирование компонентов до вызова `vi.setSystemTime` может вызвать поломки в реактивности.
+
+Смотрите [vuejs/test-utils#2074](https://github.com/vuejs/test-utils/issues/2074).
+
+## Vue warn: Failed setting prop
+
+```
+[Vue warn]: Failed setting prop "prefix" on <component-stub>: value foo is invalid.
+TypeError: Cannot set property prefix of #<Element> which has only a getter
+```
+
+Это предупреждение показывается в случае, если вы используете `shallowMount` или `stubs` с именем свойства, который идет вместе с [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element).
+
+Распространенные свойства, которые используются с `Element`:
+
+* `attributes`
+* `children`
+* `prefix`
+
+Смотрите: https://developer.mozilla.org/en-US/docs/Web/API/Element
+
+**Возможные решения**
+
+1. Используете `mount` вместо `shallowMount` для отрисовки без заглушек
+2. Игнорируйте предупреждения с помощью имитации `console.warn`
+3. Переименуйте свойство, чтобы оно не конфликтовало с `Element` свойствами

From 4f3ce4bcf7cec38739352f91926033adf88f0d9e Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Thu, 23 Jan 2025 12:15:14 +0300
Subject: [PATCH 21/38] add `migration` page

---
 docs/ru/migration/index.md | 390 +++++++++++++++++++++++++++++++++++++
 1 file changed, 390 insertions(+)
 create mode 100644 docs/ru/migration/index.md

diff --git a/docs/ru/migration/index.md b/docs/ru/migration/index.md
new file mode 100644
index 000000000..a5ac68553
--- /dev/null
+++ b/docs/ru/migration/index.md
@@ -0,0 +1,390 @@
+# Миграция с Vue Test Utils v1
+
+Обзор изменений VTU v1 -> VTU v2 и некоторых фрагментов кода, которые демонстрируют необходимые изменения. Если вы столкнулись с багом или отличием в поведение, не документированном здесь, пожалуйста [откройте issue](https://github.com/vuejs/test-utils/issues/new).
+
+## Изменения
+
+### `propsData` теперь `props`
+
+В VTU v1, вы могли бы передать `props`, используя опцию монтирования `propsData`. Это сбивало с толку, потому что вы объявляли свойства внутри `props` параметра в ваших Vue компонентах. Теперь вы можете передавать `props`, используя опцию монтирования `props`. `propsData` есть и будет продолжать поддерживаться для обратной совместимости.
+
+**До**:
+
+```js
+const App = {
+  props: ['foo']
+}
+
+const wrapper = mount(App, {
+  propsData: {
+    foo: 'bar'
+  }
+}
+```
+
+**После**:
+
+```js
+const App = {
+  props: ['foo']
+}
+
+const wrapper = mount(App, {
+  props: {
+    foo: 'bar'
+  }
+}
+```
+
+### Больше нет `createLocalVue`
+
+Во Vue 2 это было распространенным для плагинов, чтобы изменять глобальный Vue экземпляр и прикреплять различные методы к прототипу. Начиная с Vue 3, такой вариант не нужен, потому что вы создаете новое Vue приложение, используя `createApp` вместо `new Vue`, и устанавливаете плагины с помощью `createApp(App).use(/* ... */)`.
+
+Для избежания загрязнения глобального Vue экземпляром в Vue Test Utils v1 мы предоставили `createLocalVue` функцию и опцию монтирования `localVue`. Это должно было позволить вам иметь изолированный Vue экземпляр для каждого теста, избегая перекрестного загрязнения. Теперь это не проблема в Vue 3, поскольку плагины, миксины и т. д. не изменяют глобальный Vue экземпляр.
+
+Для большинства вариантов, где вы ранее использовали бы `createLocalVue` и опцию монтирования `localVue` для установки плагина, миксина или директивы, теперь вы можете использовать [`global` опцию монтирования](/api/#global-components). Здесь пример компонента и теста, которые используют `localVue`, и как это выглядит сейчас (используя `global.plugins`, поскольку Vuex это плагин):
+
+**До**:
+
+```js
+import Vuex from 'vuex'
+import { createLocalVue, mount } from '@vue/test-utils'
+
+const App = {
+  computed: {
+    count() {
+      return this.$state.count
+    }
+  }
+}
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+const store = new Vuex.Store({
+  state: {
+    return { count: 1 }
+  }
+})
+
+const wrapper = mount(App, {
+  store
+  localVue
+})
+```
+
+**После**:
+
+```js
+import { createStore } from 'vuex'
+import { mount } from '@vue/test-utils'
+
+const App = {
+  computed: {
+    count() {
+      return this.$state.count
+    }
+  }
+}
+
+const store = createStore({
+  state() {
+    return { count: 1 }
+  }
+})
+
+const wrapper = mount(App, {
+  global: {
+    plugins: [store]
+  }
+})
+```
+
+### `mocks` и `stubs` теперь в `global`
+
+`mocks` и `stubs` применяются ко всем компонентам, не только к тому, который ты передаешь в `mount`. Чтобы отразить это, `mocks` и `stubs` находятся в опции монтирования `global`:
+
+**До**:
+
+```js
+const $route = {
+  params: {
+    id: '1'
+  }
+}
+
+const wrapper = mount(App, {
+  stubs: {
+    Foo: true
+  },
+  mocks: {
+    $route
+  }
+}
+```
+
+**После**:
+
+```js
+const $route = {
+  params: {
+    id: '1'
+  }
+}
+
+const wrapper = mount(App, {
+  global: {
+    stubs: {
+      Foo: true
+    },
+    mocks: {
+      $route
+    }
+  }
+}
+```
+
+### `shallowMount` и `renderStubDefaultSlot`
+
+`shallowMount` предназначался для заглушки любых пользовательских компонентов. Хотя это и имело место быть в Vue Test Utils v1, заглушенные компоненты все еще отрисовывали их стандартный `<slot />`. Хотя это было не предусмотрено, некоторые пользователям эта функция понравилась. Это поведение было исправлено в v2 - **содержимое слота для заглушенного компонента не отрисовывается**.
+
+Дается такой код:
+
+```js
+import { shallowMount } from '@vue/test-utils'
+
+const Foo = {
+  template: `<div><slot /></div>`
+}
+
+const App = {
+  components: { Foo },
+  template: `
+    <div>
+      <Foo>
+        Foo Slot
+      </Foo>
+    </div>
+  `
+}
+```
+
+**До**:
+
+```js
+describe('App', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(App)
+    console.log(wrapper.html())
+    // renders:
+    // <div>
+    //   <foo-stub>
+    //     Foo Slot
+    //   </foo-stub>
+    // </div>
+  })
+})
+```
+
+**После**:
+
+```js
+describe('App', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(App)
+    console.log(wrapper.html())
+    // renders:
+    // <div>
+    //   <foo-stub>
+    //   </foo-stub>
+    // </div>
+  })
+})
+```
+
+Вы можете включить старое поведение примерно так:
+
+```js
+import { config } from '@vue/test-utils'
+
+config.global.renderStubDefaultSlot = true
+```
+
+### `destroy` теперь `unmount` для соответствия с Vue 3
+
+Vue 3 переименовал `vm.$destroy` в `vm.$unmount`. Vue Test Utils последовал этому примеру; `wrapper.destroy()` теперь `wrapper.unmount()`.
+
+### `scopedSlots` теперь объединены с `slots`
+
+Vue 3 объединил `slot` и `scoped-slot` синтаксис в один `v-slot`, о котором вы можете прочитать в [документации](https://v3.vuejs.org/guide/migration/slots-unification.html#overview). Поскольку `slot` и `scoped-slot` объединены, опция монтирования `scopedSlots` теперь устарела, просто используйте опцию монтирования `slots` для всего.
+
+### `slots` scope предоставляется как `params`
+
+При использовании шаблонов строк для содержимого слота, если явно не определен тэг обертка `<template #slot-name="scopeVar">`, scope слота становится доступным как `params` объект, когда слот вычисляется.
+
+```diff
+shallowMount(Component, {
+-  scopedSlots: {
++  slots: {
+-    default: '<p>{{props.index}},{{props.text}}</p>'
++    default: '<p>{{params.index}},{{params.text}}</p>'
+  }
+})
+````
+
+### `findAll().at()` удален
+
+`findAll()` теперь возвращает массив DOMWrappers.
+
+**До**
+
+```js
+wrapper.findAll('[data-test="token"]').at(0);
+```
+
+**После**
+
+```js
+wrapper.findAll('[data-test="token"]')[0];
+```
+
+### `createWrapper()` удален
+
+`createWrapper()` теперь только внутренняя функция и не может быть больше импортирована. Если вам нужен доступ к оболочке, чтобы получить DOM элемент, который не является Vue компонентом, вы можете использовать `new DOMWrapper()` конструктор.
+
+**До**
+
+```js
+import { createWrapper } from "@vue/test-utils";
+
+describe('App', () => {
+  it('renders', () => {
+    const body = createWrapper(document.body);
+    expect(body.exists()).toBe(true);
+  })
+
+```
+
+**После**
+
+```js
+import { DOMWrapper } from "@vue/test-utils";
+
+describe('App', () => {
+  it('renders', () => {
+    const body = new DOMWrapper(document.body);
+    expect(body.exists()).toBe(true);
+  })
+```
+
+### Больше нет `ref` селектора в `findAllComponents`
+
+`ref` синтаксис больше не поддерживается в `findAllComponents`. Вместо этого вы можете установить `data-test` атрибут и обновить селектор:
+
+`Component.vue`:
+
+```diff
+<template>
+-  <FooComponent v-for="number in [1, 2, 3]" :key="number" ref="number">
++  <FooComponent v-for="number in [1, 2, 3]" :key="number" data-test="number">
+    {{ number }}
+  </FooComponent>
+</template>
+```
+
+`Component.spec.js`:
+
+```diff
+- wrapper.findAllComponents({ ref: 'number' })
++ wrapper.findAllComponents('[data-test="number"]')
+```
+
+## Заметки по обновлению программ тестирования
+
+> Vue Test Utils - это фреймворк агностик, т.е. вы можете использовать его с какой угодно программой тестирования, которая вам нравится.
+
+Это утверждение лежит в основе `@vue/test-utils`. Но мы учитываем тот факт, что перенос кодовой базы и соответствующих наборов тестов в `vue@3` может занять в некоторых сценариях довольно много усилий.
+
+Эта секция пытается обобщить некоторые распространенные проблемы, обнаруженные нашим сообществом во время их миграции, а также обновить их базовый стек программ тестирования на более современные версии. Они не имеют отношения к `@vue/test-utils`, но мы надеемся, что это поможет вам завершить этот важный шаг миграции.
+
+### `@vue/vue3-jest` + `jest@^28` 
+
+Если вы приняли решение и обновляете ваши инструменты тестирования к более современным версиям, имейте в виду.
+
+#### `ReferenceError: Vue is not defined` [vue-jest#479](https://github.com/vuejs/vue-jest/issues/479)
+
+Когда `jest-environment-jsdom` пакет используется, по умолчанию он загружается библиотеки из `package.json` [`browser` entry](https://jestjs.io/docs/configuration#testenvironmentoptions-object). Вы можете переопределить это, используя `node` импорты вместо этого, и устранить эту ошибку:
+
+```js
+// jest.config.js
+module.exports = {
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  }
+}
+```
+<br/>
+
+#### В снапшоты теперь включены мои комментарии
+
+Если вы используете снапшоты и коментарии просачиваются в ваши снапшоты, обратите внимание, что комментарии теперь всегда [сохраняются](https://vuejs.org/api/application.html#app-config-compileroptions-comments) и удаляются только в production версии. Вы можете переопределить это поведения, настроив `app.config.compilerOptions` для удаления комментарием из снапшотов, а также:
+
+- через `vue-jest` [config](https://github.com/vuejs/vue-jest#compiler-options-in-vue-3).
+  ```js
+  // jest.config.js
+  module.exports = {
+    globals: {
+      'vue-jest': {
+        compilerOptions: {
+          comments: false
+        }
+      }
+    }
+  }
+  ```
+- через `@vue/test-utils` [`mountingOptions.global.config`](https://test-utils.vuejs.org/api/#global) либо глобально, либо для каждого теста отдельно.
+
+## Сравнение с v1
+
+Это таблица для тех, кто пришел с VTU 1, в которой сравниваются две API.
+
+### Base API
+
+| export            | заметки                         |
+| ----------------- | ------------------------------- |
+| enableAutoDestroy | заменено на `enableAutoUnmount` |
+
+### Mounting Options
+
+| опция            | заметки                                                                                         |
+| ---------------- | ----------------------------------------------------------------------------------------------- |
+| mocks            | находится в `global`                                                                            |
+| propsData        | теперь называется `props`                                                                       |
+| provide          | находится в `global`                                                                            |
+| mixins           | находится в `global`                                                                            |
+| plugins          | находится в `global`                                                                            |
+| component        | находится в `global`                                                                            |
+| directives       | находится в `global`                                                                            |
+| attachToDocument | переименовано в `attachTo`. Смотрите [здесь](https://github.com/vuejs/vue-test-utils/pull/1492) |
+| scopedSlots      | удалено. ScopedSlots объединен с `slots` в Vue 3                                                |
+| context          | удалено. В отличии от Vue2, теперь это не имеет смысла.                                         |
+| localVue         | удалено. Больше не требуется - в Vue 3 нет глобально экземпляра Vue для изменений.              |
+| listeners        | удалено. Больше не существует в Vue 3                                                           |
+| parentComponent  | удалено                                                                                         |
+
+### Wrapper API (mount)
+
+| метод          | заметки                                                                                                      |
+| -------------- | ------------------------------------------------------------------------------------------------------------ |
+| find           | только `querySelector` синтаксис поддерживается. Используйте `findComponent(Comp)` для поиска Vue компонента |
+| setValue       | работает с select, checkbox, radio button, input, textarea. Возвращает `nextTick`.                           |
+| trigger        | возвращает `nextTick`. Вы можете сделать `await wrapper.find('button').trigger('click')`                     |
+| destroy        | переименован в `unmount` для соответствия с Vue 3 названием хука жизненного цикла.                           |
+| contains       | удалено. Используйте `find`                                                                                  |
+| emittedByOrder | удалено. Используйте `emitted`                                                                               |
+| setSelected    | удалено. Теперь часть `setValue`                                                                             |
+| setChecked     | удалено. Теперь часть `setValue`                                                                             |
+| is             | удалено                                                                                                      |
+| isEmpty        | удалено. Используйте matchers, такой как [этот](https://github.com/testing-library/jest-dom#tobeempty)       |
+| isVueInstance  | удалено                                                                                                      |
+| name           | удалено                                                                                                      |
+| setMethods     | удалено                                                                                                      |

From 3d0ad4a83c02a26e27340259a83f1579d26c80b1 Mon Sep 17 00:00:00 2001
From: denis moshkin <denis.moshkin.007@yandex.ru>
Date: Thu, 23 Jan 2025 13:13:58 +0300
Subject: [PATCH 22/38] fixes

---
 docs/ru/guide/essentials/conditional-rendering.md | 2 +-
 docs/ru/guide/essentials/forms.md                 | 2 +-
 docs/ru/guide/index.md                            | 2 +-
 docs/ru/migration/index.md                        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/ru/guide/essentials/conditional-rendering.md b/docs/ru/guide/essentials/conditional-rendering.md
index c71f2f04f..c1e00ee4a 100644
--- a/docs/ru/guide/essentials/conditional-rendering.md
+++ b/docs/ru/guide/essentials/conditional-rendering.md
@@ -71,7 +71,7 @@ test('does not render an admin link', () => {
 
 ## Использование `data`
 
-Последний тест - это проверить, что ссылка на администратора отображается, когда `admin` равен `true`. Значение `false` по умолчанию, но мы можем переопределить, используя второй аргумент в `mount()`, [`mounting options`](/ru/api/#mount).
+Последний тест - это проверить, что ссылка на администратора отображается, когда `admin` равен `true`. Значение `false` по умолчанию, но мы можем переопределить, используя второй аргумент в `mount()`, [`параметры монтирования`](/ru/api/#mount).
 
 Для `data`, мы можем использовать опцию с подходящим названием `data`:
 
diff --git a/docs/ru/guide/essentials/forms.md b/docs/ru/guide/essentials/forms.md
index 330bd0932..b7ba17022 100644
--- a/docs/ru/guide/essentials/forms.md
+++ b/docs/ru/guide/essentials/forms.md
@@ -406,4 +406,4 @@ test('emits textarea value on submit', async () => {
 - Используйте `setValue` для установки значения как на полях ввода, так и Vue компонентов.
 - Используйте `trigger` для вызова DOM событий, с или без модификаторов.
 - Добавьте дополнительные данные о событии в `trigger`, используя второй параметр.
-- Проверьте, что DOM изменился и верные события были сгенерированы. Try not to assert data on the Component instance.
+- Проверьте, что DOM изменился и верные события были сгенерированы. Старайтесь не проверять данные прямо с экземпляра компонента.
diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
index 39cd9de0d..3e2c8d9f9 100644
--- a/docs/ru/guide/index.md
+++ b/docs/ru/guide/index.md
@@ -43,7 +43,7 @@ Vue Test Utils обычно используется с программами 
 - [Playwright](https://playwright.dev/docs/test-components) (экспериментальный). На основе браузера, поддерживает Vite.
 - [WebdriverIO](https://webdriver.io/docs/component-testing/vue). На основе браузера, поддерживает Vite, Webpack, кросс-браузерную поддержку.
 
-Vue Test Utils это небольшая библиотека. Для создания чего-то более функционального, вы можете рассмотреть [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/overview) которая имеет hot reload (быстрая перезагрузка), или [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/) which emphasizes accessibility based selectors when making assertions. Оба инструмента используется Vue Test Utils под капотом и предоставляют те же самые API.
+Vue Test Utils это небольшая библиотека. Для создания чего-то более функционального, вы можете рассмотреть [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/overview) которая имеет hot reload (быстрая перезагрузка), или [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/), которая делает акцент на селекторах при создании проверок. Оба инструмента используется Vue Test Utils под капотом и предоставляют те же самые API.
 
 ## Что дальше? 
 
diff --git a/docs/ru/migration/index.md b/docs/ru/migration/index.md
index a5ac68553..b02d96520 100644
--- a/docs/ru/migration/index.md
+++ b/docs/ru/migration/index.md
@@ -353,7 +353,7 @@ module.exports = {
 | ----------------- | ------------------------------- |
 | enableAutoDestroy | заменено на `enableAutoUnmount` |
 
-### Mounting Options
+### Параметры монтирования
 
 | опция            | заметки                                                                                         |
 | ---------------- | ----------------------------------------------------------------------------------------------- |

From 3fd69e2c8c5db59e816457897288354a3e793834 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:08:00 +0300
Subject: [PATCH 23/38] Update docs/ru/guide/advanced/async-suspense.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/async-suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/async-suspense.md b/docs/ru/guide/advanced/async-suspense.md
index 3e3973bf0..d1aa7f9a4 100644
--- a/docs/ru/guide/advanced/async-suspense.md
+++ b/docs/ru/guide/advanced/async-suspense.md
@@ -8,7 +8,7 @@
 
 ## Простой пример - Обновление при помощи `trigger`
 
-Давайте пере используем `<Counter>` компонент из [обработка события](/ru/guide/essentials/event-handling) с одним изменением; мы сейчас отразим `count` в `template`.
+Давайте используем компонент `<Counter>` из [обработка события](/ru/guide/essentials/event-handling) с одним изменением; мы сейчас отобразим `count` в `template`.
 
 ```js
 const Counter = {

From 4ebfd415d8283c60da6ad5cd2ae1db0d529d224e Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:09:40 +0300
Subject: [PATCH 24/38] Update docs/ru/guide/advanced/async-suspense.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/async-suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/async-suspense.md b/docs/ru/guide/advanced/async-suspense.md
index d1aa7f9a4..b72955da1 100644
--- a/docs/ru/guide/advanced/async-suspense.md
+++ b/docs/ru/guide/advanced/async-suspense.md
@@ -47,7 +47,7 @@ test('increments by 1', () => {
 Если ты хочешь изучить больше об этом базовом JavaScript поведении, прочитайте про [Event Loop и его macrotasks и microtasks](https://javascript.info/event-loop#macrotasks-and-microtasks).
 :::
 
-Как мы можем изменить это? Vue в действительности предоставляет возможность нам ждать, пока DOM не обновится: `nextTick`.
+Как мы можем изменить это? Vue предоставляет нам способ дождаться обновления DOM – `nextTick`.
 
 ```js {1,7}
 import { nextTick } from 'vue'

From 8fee057bea37689be83b229a7b8723e93ed9e880 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:11:16 +0300
Subject: [PATCH 25/38] Update docs/ru/guide/advanced/async-suspense.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/async-suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/async-suspense.md b/docs/ru/guide/advanced/async-suspense.md
index b72955da1..749d2ba9b 100644
--- a/docs/ru/guide/advanced/async-suspense.md
+++ b/docs/ru/guide/advanced/async-suspense.md
@@ -62,7 +62,7 @@ test('increments by 1', async () => {
 })
 ```
 
-Теперь тест будет пройден, чтобы мы убедились в том, что следующий "тик" выполнился и DOM обновился перед запуском дальнейших проверок.
+Теперь тест будет пройден, потому что мы убедились в том, что следующий "тик" выполнился и DOM обновился перед запуском дальнейших проверок.
 
 Поскольку `await nextTick()` является распространенным, Vue Test Utils предоставляет сокращение. Методы, которые вызывают обновление DOM, такие как `trigger` и `setValue`, вернут `nextTick`, поэтому ты можешь просто указать `await` перед ними:
 

From 171591cc868faab25ecf98ae7dbff68e9f3a4808 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:13:07 +0300
Subject: [PATCH 26/38] Update docs/ru/guide/advanced/transitions.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/transitions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/transitions.md b/docs/ru/guide/advanced/transitions.md
index f5215f63f..4a2a081d7 100644
--- a/docs/ru/guide/advanced/transitions.md
+++ b/docs/ru/guide/advanced/transitions.md
@@ -38,7 +38,7 @@ export default {
 </style>
 ```
 
-Поскольку Vue Test Utils ставит заглушку на встроенные переходы, вы можете протестировать компонент выше, как вы бы протестировали любой другой компонент:
+Поскольку Vue Test Utils ставит заглушку на встроенные переходы, вы можете протестировать компонент выше, так как вы бы протестировали любой другой компонент:
 
 ```js
 import Component from './Component.vue'

From c695ada5621799fc4bb5f830ccc1b95d53ecc2a1 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:14:29 +0300
Subject: [PATCH 27/38] Update docs/ru/guide/advanced/vue-router.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/vue-router.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/vue-router.md b/docs/ru/guide/advanced/vue-router.md
index 6e95d4072..6e8905959 100644
--- a/docs/ru/guide/advanced/vue-router.md
+++ b/docs/ru/guide/advanced/vue-router.md
@@ -1,6 +1,6 @@
 # Тестирование Vue Router
 
-В этой статье будут представлены два пути для тестирования приложения, используя Vue Router:
+В этой статье будут представлены два пути для тестирования приложения, использующего Vue Router:
 
 1. Используя настоящий Vue Router, который максимально приближен к реальности, но также может добавить сложности при тестировании больших приложений.
 2. Использование имитированного роутера позволяет более точно управлять средой тестирования.

From 6a9f1520daf6edf30a3b6003e6bfc4173a5f1714 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:28:15 +0300
Subject: [PATCH 28/38] Update docs/ru/guide/advanced/vuex.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/vuex.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/vuex.md b/docs/ru/guide/advanced/vuex.md
index 0a388acc4..0574e1ea5 100644
--- a/docs/ru/guide/advanced/vuex.md
+++ b/docs/ru/guide/advanced/vuex.md
@@ -6,7 +6,7 @@ Vuex - это всего лишь деталь реализации; для те
 
 ## Простой пример
 
-Здесь простое Vuex хранилище и компонент, который использует Vuex хранилище
+Вот простое Vuex хранилище и компонент, что использует Vuex хранилище
 
 ```js
 import { createStore } from 'vuex'

From 34f05d47bb9f50c47b0928928a7ee74d934e504d Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:31:41 +0300
Subject: [PATCH 29/38] Update docs/ru/guide/advanced/vue-router.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/vue-router.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/vue-router.md b/docs/ru/guide/advanced/vue-router.md
index 6e8905959..c488eff16 100644
--- a/docs/ru/guide/advanced/vue-router.md
+++ b/docs/ru/guide/advanced/vue-router.md
@@ -134,7 +134,7 @@ const Posts = {
 }
 ```
 
-Корень приложения отображает `<router-link>`, ведущая на `/posts`, где мы перечисляем посты.
+Корень приложения отображает `<router-link>`, ведущий на `/posts`, где мы перечисляем посты.
 
 Настоящий роутер выглядит примерно так. Обратите внимание, что мы экспортируем роуты отдельно от роутера, чтобы позднее мы могли добавить новый роутер для каждого теста.
 

From f6a891d0e36971d53c73985aa6c094178f51974d Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:34:45 +0300
Subject: [PATCH 30/38] Update docs/ru/guide/advanced/vuex.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/advanced/vuex.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/vuex.md b/docs/ru/guide/advanced/vuex.md
index 0574e1ea5..764522d85 100644
--- a/docs/ru/guide/advanced/vuex.md
+++ b/docs/ru/guide/advanced/vuex.md
@@ -210,7 +210,7 @@ const app = createApp({ /* ... */ })
 app.use(store, key)
 ```
 
-Для избежания повтора передачи параметра ключа, когда `useStore` используется, Vuex документация рекомендует вынесение этой логики в вспомогательную функцию и переиспользовать эту функцию вместо стандартной `useStore` функции. [Прочитайте подробнее об этом здесь](https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function). Подход, предоставляющий хранилище с использованием Vue Test Utils, зависит от способа использования `useStore` функции в компоненте.
+Чтобы избежать повторной передачи параметра ключа всякий раз, когда `useStore` используется, в документации Vuex рекомендуется вынесение этой логики во вспомогательную функцию и переиспользовать эту функцию вместо стандартной `useStore` функции. [Прочитайте подробнее об этом здесь](https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function). Подход, предоставляющий хранилище с использованием Vue Test Utils, зависит от способа использования `useStore` функции в компоненте.
 
 ### Тестирование компонентов, использующий `useStore` без ключа внедрения
 

From 638269d21cc3d74473e3f975563391cebc0d678d Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:35:08 +0300
Subject: [PATCH 31/38] Update docs/ru/guide/essentials/a-crash-course.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/essentials/a-crash-course.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/essentials/a-crash-course.md b/docs/ru/guide/essentials/a-crash-course.md
index 5165ef089..bb671ef02 100644
--- a/docs/ru/guide/essentials/a-crash-course.md
+++ b/docs/ru/guide/essentials/a-crash-course.md
@@ -56,7 +56,7 @@ test('renders a todo', () => {
 
 Далее мы вызываем `mount` и передаем компонент в качестве первого аргумента - это то, что вам придется делать почти в каждом тесте. По соглашению, мы присваиваем результат переменной с названием `wrapper`, поскольку `mount` предоставляет простой "wrapper" вокруг приложения с некоторыми удобными методами для тестирования.
 
-Наконец, мы используем другой глобальный метод общий для многих программ тестирования, в том числе и Jest, - `expect`. Идея в том, что мы утверждаем или _ожидаем_, что реальное значение будет таким, каким мы его себе представляем. В данном случае, мы ищем html-элемент с селектором `data-test="todo"` в DOM (Document Object Model), это будет выглядеть примерно так: `<div data-test="todo">...</div>`. После, мы вызываем `text` метод для получения содержимого, которое мы ожидаем: `'Learn Vue.js 3'`.
+Наконец, мы используем другой глобальный метод, общий для многих программ тестирования, в том числе и Jest, - `expect`. Идея в том, что мы утверждаем или _ожидаем_, что реальное значение будет таким, каким мы его себе представляем. В данном случае, мы ищем html-элемент с селектором `data-test="todo"` в DOM (Document Object Model), это будет выглядеть примерно так: `<div data-test="todo">...</div>`. После, мы вызываем `text` метод для получения содержимого, которое мы ожидаем: `'Learn Vue.js 3'`.
 
 > Использование `data-test` селекторов не обязательно, но это может сделать твои тесты более гибкими. Классы и идентификаторы меняются по мере роста приложения, но при использовании `data-test` другими разработчиками будет более понятно, что эти элементы нужны для тестов и не должны изменяться.
 

From db2e7fc2f2851918275fbdc18f9e2be13eb5c383 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:40:24 +0300
Subject: [PATCH 32/38] Update docs/ru/guide/essentials/a-crash-course.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/essentials/a-crash-course.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/essentials/a-crash-course.md b/docs/ru/guide/essentials/a-crash-course.md
index bb671ef02..38f3333a8 100644
--- a/docs/ru/guide/essentials/a-crash-course.md
+++ b/docs/ru/guide/essentials/a-crash-course.md
@@ -62,7 +62,7 @@ test('renders a todo', () => {
 
 ## Делаем тест успешным
 
-Если мы запустим этот тест, то он выполниться с такой ошибкой: `Unable to get [data-test="todo"]` (`Не удалось получить [data-test="todo"]`). Потому что мы не отрисовываем никакую задачу, поэтому вызов `get()` возвращается с ошибкой и не возвращает "wrapper" (помните, что VTU оборачивает все компоненты и DOM элементы в "wrapper" с некоторыми удобными методами). Давайте обновим `<template>` в `TodoApp.vue` для отрисовки `todos` массива:
+Если мы запустим этот тест, то он выполниться с такой ошибкой: `Unable to get [data-test="todo"]` (`Не удалось получить [data-test="todo"]`). Так как мы мы не отрисовываем никаких задач, то вызов `get()` возвращается с ошибкой и не возвращает "wrapper" (помните, что VTU оборачивает все компоненты и DOM элементы в "wrapper" с некоторыми удобными методами). Давайте обновим `<template>` в `TodoApp.vue` для отрисовки `todos` массива:
 
 ```vue
 <template>

From 519f7d255bdda1248e7a16daeb2a20bfc12fbbd7 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Fri, 24 Jan 2025 11:44:55 +0300
Subject: [PATCH 33/38] Update docs/ru/guide/essentials/event-handling.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/essentials/event-handling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/essentials/event-handling.md b/docs/ru/guide/essentials/event-handling.md
index e0a230625..a942fcfc0 100644
--- a/docs/ru/guide/essentials/event-handling.md
+++ b/docs/ru/guide/essentials/event-handling.md
@@ -147,7 +147,7 @@ test('emits an event with count when clicked', () => {
 
 ## Composition API
 
-Если вы используете Composition API, вы вызовите `context.emit()` вместо `this.$emit()`. `emitted()` фиксирует события в обоих случаях, поэтому ты можешь тестировать компоненты, используя такой же алгоритм, описанный здесь.
+Если используете Composition API, то вызовайте `context.emit()` вместо `this.$emit()`. `emitted()` фиксирует события в обоих случаях, поэтому можете тестировать компоненты, используя алгоритм, описанный здесь.
 
 ## Заключение
 

From 75bc2ba345df23d9b4f65cdd8244ea9efa07f137 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:14:05 +0300
Subject: [PATCH 34/38] Update docs/ru/guide/index.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
index 3e2c8d9f9..47b71d650 100644
--- a/docs/ru/guide/index.md
+++ b/docs/ru/guide/index.md
@@ -47,7 +47,7 @@ Vue Test Utils это небольшая библиотека. Для созда
 
 ## Что дальше? 
 
-Чтобы увидеть Vue Test Utils в действии, [попробовать ускоренный курс](/ru/guide/essentials/a-crash-course.md), где мы создали простое Todo приложение, используя подход "сначала тест, потом реализация".
+Чтобы увидеть Vue Test Utils в действии, [попробуйте ускоренный курс](/ru/guide/essentials/a-crash-course.md), где мы создали простое Todo приложение, используя подход "сначала тест, потом реализация".
 
 Документация разделена на 2 главных раздела:
 

From 59177ca6ea73b28cf00f5192bccf638977c4d98e Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:14:30 +0300
Subject: [PATCH 35/38] Update docs/ru/guide/index.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
index 47b71d650..5c2456f4c 100644
--- a/docs/ru/guide/index.md
+++ b/docs/ru/guide/index.md
@@ -43,7 +43,7 @@ Vue Test Utils обычно используется с программами 
 - [Playwright](https://playwright.dev/docs/test-components) (экспериментальный). На основе браузера, поддерживает Vite.
 - [WebdriverIO](https://webdriver.io/docs/component-testing/vue). На основе браузера, поддерживает Vite, Webpack, кросс-браузерную поддержку.
 
-Vue Test Utils это небольшая библиотека. Для создания чего-то более функционального, вы можете рассмотреть [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/overview) которая имеет hot reload (быстрая перезагрузка), или [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/), которая делает акцент на селекторах при создании проверок. Оба инструмента используется Vue Test Utils под капотом и предоставляют те же самые API.
+Vue Test Utils это небольшая библиотека. Для создания чего-то более функционального, предлагаем рассмотреть [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/overview) которая имеет hot reload (быстрая перезагрузка), или [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/), которая делает акцент на селекторах при создании проверок. Оба инструмента используется Vue Test Utils под капотом и предоставляют те же самые API.
 
 ## Что дальше? 
 

From 5bc6635b57e6084cd921d01103ea96d73c59d36f Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:14:51 +0300
Subject: [PATCH 36/38] Update docs/ru/guide/essentials/forms.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/essentials/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/essentials/forms.md b/docs/ru/guide/essentials/forms.md
index b7ba17022..e683024b9 100644
--- a/docs/ru/guide/essentials/forms.md
+++ b/docs/ru/guide/essentials/forms.md
@@ -36,7 +36,7 @@ export default {
 
 ### Установка значений элементов
 
-Самый простой путь привязать поле ввода к данным в Vue - это использование `v-model`. Как ты, возможно, знаешь сейчас, он позволяет генерировать события для каждого элемента формы и принимать свойства, что значительно упрощает взаимодействие с элементами формы.
+Самый простой путь привязать поле ввода к данным в Vue - это использование `v-model`. Как вы, возможно, уже знаете, он позволяет генерировать события для каждого элемента формы и принимать свойства, что значительно упрощает взаимодействие с элементами формы.
 
 Чтобы изменить значение поля ввода в VTU, вы можете использовать `setValue()` метод. Он принимает параметр, чаще всего `String` или `Boolean`, и возвращает `Promise`, который выполнится после того, как Vue обновит DOM.
 

From 4c569735e41e3915c90ed9b37ca8ba18697cb72d Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:16:13 +0300
Subject: [PATCH 37/38] Update docs/ru/guide/index.md

Co-authored-by: Victor Gladkikh <me@alfeg.net>
---
 docs/ru/guide/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
index 5c2456f4c..c42f767e7 100644
--- a/docs/ru/guide/index.md
+++ b/docs/ru/guide/index.md
@@ -51,8 +51,8 @@ Vue Test Utils это небольшая библиотека. Для созда
 
 Документация разделена на 2 главных раздела:
 
-- **Основы**, покрывает основные случаи использования, с которыми вы столкнетесь, при тестировании Vue компонентов.
-- **Углубленно**, исследует продвинутые возможности библиотеки.
+- **Основы**: покрывает основные случаи использования, с которыми вы столкнетесь, при тестировании Vue компонентов.
+- **Углубленно**: исследует продвинутые возможности библиотеки.
 
 Вы также можете изучить полную [API](/ru/api/).
 

From 5077799a74ee2a3bb6b955fd0b50208a636145b2 Mon Sep 17 00:00:00 2001
From: VisualYuki <57352899+VisualYuki@users.noreply.github.com>
Date: Sun, 26 Jan 2025 11:16:29 +0300
Subject: [PATCH 38/38] Update docs/ru/guide/advanced/vue-router.md

---
 docs/ru/guide/advanced/vue-router.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/advanced/vue-router.md b/docs/ru/guide/advanced/vue-router.md
index c488eff16..dee0f24ca 100644
--- a/docs/ru/guide/advanced/vue-router.md
+++ b/docs/ru/guide/advanced/vue-router.md
@@ -315,7 +315,7 @@ test('routing', async () => {
 })
 ```
 
-Тест _наконец-то_ проходит. Великолепно! Однако все это делается вручную для крошечного небольшого приложения. Вот в чем причина использования имитированного роутера - это распространенный подход при тестировании Vue компонентов, используя Vue Test Utils. В этой случае, если ты предпочитаешь использовать настоящий роутер, держите в уме, что каждый тест должен использовать его собственный экземпляр роутера следующим образом:
+Тест _наконец-то_ проходит. Великолепно! Однако все это делается вручную для крошечного небольшого приложения. Вот в чем причина использования имитированного роутера - это распространенный подход при тестировании Vue компонентов, используя Vue Test Utils. В этом случае, если ты предпочитаешь использовать настоящий роутер, держите в уме, что каждый тест должен использовать свой собственный экземпляр роутера следующим образом:
 
 ```js {1,19}
 import { mount, flushPromises } from '@vue/test-utils'