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..c61e9d266
--- /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: '/ru/api/' },
+      { text: 'Миграция с Vue 2', link: '/ru/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: 'Тестирование форм', link: '/ru/guide/essentials/forms' },
+            {
+              text: 'Передача данных в компоненты',
+              link: '/ru/guide/essentials/passing-data'
+            },
+            {
+              text: 'Пишем компоненты для легкого тестирования',
+              link: '/ru/guide/essentials/easy-to-test'
+            }
+          ]
+        },
+        {
+          text: 'Углубленно',
+          items: [
+            { text: 'Слоты', link: '/ru/guide/advanced/slots' },
+            {
+              text: 'Асинхронное поведение',
+              link: '/ru/guide/advanced/async-suspense'
+            },
+            {
+              text: 'Выполнение HTTP запросов',
+              link: '/ru/guide/advanced/http-requests'
+            },
+            { text: 'Transitions', link: '/ru/guide/advanced/transitions' },
+            {
+              text: 'Экземпляр компонента',
+              link: '/ru/guide/advanced/component-instance'
+            },
+            {
+              text: 'Переиспользование и композиция',
+              link: '/ru/guide/advanced/reusability-composition'
+            },
+            { 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: 'Заглушки и неглубокий Mount',
+              link: '/ru/guide/advanced/stubs-shallow-mount'
+            },
+            {
+              text: 'Тестирование Server-side Rendering',
+              link: '/ru/guide/advanced/ssr'
+            }
+          ]
+        },
+        {
+          text: 'Дополнительные темы',
+          items: [
+            { text: 'Плагины', link: '/ru/guide/extending-vtu/plugins' },
+            {
+              text: 'Сообщество и обучение',
+              link: '/ru/guide/extending-vtu/community-learning'
+            }
+          ]
+        },
+        {
+          text: 'Ответы на вопросы',
+          link: '/ru/guide/faq/'
+        },
+        {
+          text: 'Миграция с Vue 2',
+          link: '/ru/migration/'
+        },
+        {
+          text: 'API руководство',
+          link: '/ru/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/api/index.md b/docs/ru/api/index.md
new file mode 100644
index 000000000..4dbafbd50
--- /dev/null
+++ b/docs/ru/api/index.md
@@ -0,0 +1,2043 @@
+---
+sidebar: auto
+---
+
+# API Reference
+
+## mount
+
+Создает оболочку, которая содержит смонтированный и отрисованный Vue компонент для тестирования. 
+Обратите внимание, что при имитации даты/таймеров при помощи Vitest, он должен быть вызван после `vi.setSystemTime`.
+
+**Сигнатура:**
+
+```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
+```
+
+**Подробности:**
+
+`mount` - это главный метод, предоставляемый Vue Test Utils. Он создает Vue 3 приложение, которое содержит и отрисовывает компонент для тестирования. В свою очередь, он создает оболочку для взаимодействия и проверки компонента.
+
+```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')
+})
+```
+
+Обратите внимание, что `mount` принимает второй параметр, чтобы определить конфигурацию состояния компонента.
+
+**Пример: монтирование вместе с `props` компонента и Vue App плагина**
+
+```js
+const wrapper = mount(Component, {
+  props: {
+    msg: 'world'
+  },
+  global: {
+    plugins: [vuex]
+  }
+})
+```
+
+#### options.global
+
+В зависимости от состояния компонента вы можете настроить вышеупомянутое Vue 3 приложение при помощи [`MountingOptions.global` свойства конфига.](#global) Это было бы полезно для предоставления имитируемых данных, которые, как ожидается, будут доступны вашему компоненту.
+
+::: tip
+Если вы решили настроить общую конфигурацию для многих ваших тестов, тогда вы можете установить конфигурацию для всех ваших тестов, используя экспортированный [`config` объект.](#config)
+:::
+
+### attachTo
+
+Определяет элемент, на который будет монтироваться компонент. Метод недоступен при использовании `renderToString`.
+
+**Сигнатура:**
+
+```ts
+attachTo?: Element | string
+```
+
+**Подробности:**
+
+Может быть корректным CSS селектором или [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element), связанного с документом.
+
+Обратите внимание, что компонент добавлен к узлу, и метод не заменяет все содержимое узла. Если вы монтируете компонент на тот же самый узел в нескольких тестах, убедитесь, что отмонтировали его после каждого теста при помощи вызова `wrapper.unmount()`, он удалит отрисованные элементы.
+
+`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
+
+Устанавливает HTML атрибуты для компонента.
+
+**Сигнатура:**
+
+```ts
+attrs?: Record<string, unknown>
+```
+
+**Подробности:**
+
+`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'
+  })
+})
+```
+
+Обратите внимание, что установка `props` имеет больший приоритет, чем атрибут с тем же названием:
+
+```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
+
+Переопределяет `data` компонента. Должно быть функцией:
+
+**Сигнатура:**
+
+```ts
+data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
+```
+
+**Подробности:**
+
+`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
+
+Устанавливает `props` на компонент при монтировании.
+
+**Сигнатура:**
+
+```ts
+props?: (RawProps & Props) | ({} extends Props ? null : never)
+```
+
+**Подробности:**
+
+`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
+
+Устанавливает значения для слотов у компонента.
+
+**Сигнатура:**
+
+```ts
+type Slot = VNode | string | { render: Function } | Function | Component
+
+slots?: { [key: string]: Slot } & { default?: Slot }
+```
+
+**Подробности:**
+
+Слоты могут быть строкой или любым валидным определением компонента(импортированным из `.vue` файла или предоставленным в 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
+
+**Сигнатура:**
+
+```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
+}
+```
+
+Вы можете настроить все `global` опции как для каждого теста, так и для всего набора тестов. [Смотрите здесь как настроить сразу все тесты по умолчанию](#config-global).
+
+#### global.components
+
+Регистрирует компоненты глобально для монтированного компонента.
+
+**Сигнатура:**
+
+```ts
+components?: Record<string, Component | object>
+```
+
+**Подробности:**
+
+`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
+
+Настраивает [глобальную конфигурацию Vue приложения](https://v3.vuejs.org/api/application-config.html#application-config).
+
+**Сигнатура:**
+
+```ts
+config?: Partial<Omit<AppConfig, 'isNativeTag'>>
+```
+
+#### global.directives
+
+Регистрирует [директиву](https://v3.vuejs.org/api/directives.html#directives) глобально для смонтированного компонента.
+
+**Сигнатура:**
+
+```ts
+directives?: Record<string, Directive>
+```
+
+**Подробности:**
+
+`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
+
+Регистрирует [mixin](https://v3.vuejs.org/guide/mixins.html) глобально для монтированного компонента.
+
+**Сигнатура:**
+
+```ts
+mixins?: ComponentOptions[]
+```
+
+**Подробности:**
+
+`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
+
+Имитирует свойство глобального экземпляра. Может быть использовано для имитации `this.$store`, `this.$router` и т.д.
+
+**Сигнатура:**
+
+```ts
+mocks?: Record<string, any>
+```
+
+**Подробности:**
+
+::: warning
+Он предоставляет имитацию переменных, добавленных с помощью сторонних плагинов, но не собственные свойства Vue, такие как $root, $children и т.д.
+:::
+
+`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
+
+Устанавливает плагины на монтированный компонент.
+
+**Сигнатура:**
+
+```ts
+plugins?: (Plugin | [Plugin, ...any[]])[]
+```
+
+**Подробности:**
+
+`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]
+    }
+  })
+})
+```
+
+Чтобы использовать плагин вместе с опциями, массив опций может быть передан.
+
+`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
+
+Предоставляет данные, которые будут предоставлены в `setup` функции через `inject`.
+
+**Сигнатура:**
+
+```ts
+provide?: Record<any, any>
+```
+
+**Подробности:**
+
+`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>
+})
+```
+
+Если вы используете ES6 `Symbol` для ключа в provide, вы можете использовать это как динамический ключ:
+
+`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
+
+Отрисовывает `default` содерижмое слота, даже при использовании `shallow` или `shallowMount`.
+
+**Сигнатура:**
+
+```ts
+renderStubDefaultSlot?: boolean
+```
+
+**Подробности:**
+
+По умолчанию **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>'
+  )
+})
+```
+
+Из-за технических ограничений **это поведение не может быть расширено на слоты, отличные от слотов по умолчанию**.
+
+#### global.stubs
+
+Устанавливает глобальную заглушку на смонтированный компонент.
+
+**Сигнатура:**
+
+```ts
+stubs?: Record<any, any>
+```
+
+**Подробности:**
+
+Заглушка стоит для `Transition` и `TransitionGroup` по умолчанию.
+
+`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
+
+Заглушка для всех дочерних компонентов из компонента.
+
+**Сигнатура:**
+
+```ts
+shallow?: boolean
+```
+
+**Подробности:**
+
+По умолчанию **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()` это псевдоним для монтирования компонента при помощи `shallow: true`.
+:::
+
+## Wrapper методы
+
+Когда вы используете `mount`, `VueWrapper` возвращается с рядом полезных функций для тестирования. `VueWrapper` - это небольшая оболочка вокруг вашего экземпляра компонента.
+
+Обратите внимание, что методы, такие как `find`, возвращают `DOMWrapper`, который является небольшой оболочкой вокруг DOM элементов в вашем компоненте и его детей. Оба реализуют схожий API.
+
+### attributes
+
+Возвращает атрибуты DOM элемента.
+
+**Сигнатура:**
+
+```ts
+attributes(): { [key: string]: string }
+attributes(key: string): string
+attributes(key?: string): { [key: string]: string } | string
+```
+
+**Подробности:**
+
+`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
+
+**Сигнатура:**
+
+```ts
+classes(): string[]
+classes(className: string): boolean
+classes(className?: string): string[] | boolean
+```
+
+**Подробности:**
+
+Возвращает массив классов элемента.
+
+`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
+
+Возвращает все сгенерированные события из вашего компонента.
+
+**Сигнатура:**
+
+```ts
+emitted<T = unknown>(): Record<string, T[]>
+emitted<T = unknown>(eventName: string): undefined | T[]
+emitted<T = unknown>(eventName?: string): undefined | T[] | Record<string, T[]>
+```
+
+**Подробности:**
+
+Аргументы хранятся в массиве, поэтому вы можете проверить, какие аргументы были сгенерированы вместе с каждым событием.
+
+`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() вернет { 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
+
+Проверяет, существует ли элемент или нет.
+
+**Сигнатура:**
+
+```ts
+exists(): boolean
+```
+
+**Подробности:**
+
+Вы можете использовать тот же синтаксис по аналогии с `querySelector`
+
+`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
+
+Находит элемент и возвращает `DOMWrapper`, если он найден.
+
+**Сигнатура:**
+
+```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>;
+```
+
+**Подробности:**
+
+Вы можете использовать такой же синтаксис, как и с `querySelector`. `find` - это, по сути, псевдоним для `querySelector`. В дополнении, вы можете найти ref элемента.
+
+Он похож на `get`, но `find` вернет ErrorWrapper, если элемент не найден, но [`get`](#get) выбросит ошибку.
+
+Как правило, всегда используйте `find`, когда вы проверяете что-то, что не существует. Если вы проверяете что-то, что существует, используйте [`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') //=> найдено; вернет DOMWrapper
+  wrapper.find('[data-test="span"]') //=> найдено; вернет DOMWrapper
+  wrapper.find({ ref: 'span' }) //=> найдено; вернет DOMWrapper
+  wrapper.find('p') //=> ничего не найдено; вернет ErrorWrapper
+})
+```
+
+### findAll
+
+Похож на `find`, но вместо этого возвращает массив `DOMWrapper`.
+
+**Сигнатура:**
+
+```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>[]
+```
+
+**Подробности:**
+
+`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() вернет массив DOMWrappers
+  const thirdRow = wrapper.findAll('span')[2]
+})
+```
+
+### findComponent
+
+Находит экземпляр Vue компонента и вернет `VueWrapper`, если найден. В противном случае вернет `ErrorWrapper`.
+
+**Сигнатура:**
+
+```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
+```
+
+**Подробности:**
+
+`findComponent` поддерживает несколько вариантов:
+
+| синтаксис      | пример                        | детали                                                                                                                                                             |
+| -------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 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`
+
+```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)
+
+  // Все следующие запросы вернули бы VueWrapper
+
+  wrapper.findComponent('.foo')
+  wrapper.findComponent('[data-test="foo"]')
+
+  wrapper.findComponent({ name: 'Foo' })
+
+  wrapper.findComponent({ ref: 'foo' })
+
+  wrapper.findComponent(Foo)
+})
+```
+
+:::warning
+Если `ref` в компоненте ссылается на HTML элемент, `findComponent` вернет пустую оболочку. Это ожидаемое поведение.
+:::
+
+:::warning Использование с CSS селекторами
+Использование `findComponent` с CSS селекторами может привести к запутанному поведению
+
+Рассмотрите этот пример:
+
+```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') // => нашел Root компонент
+expect(rootByCss.vm.$options.name).toBe('Root')
+const childByCss = wrapper.findComponent('.child')
+expect(childByCss.vm.$options.name).toBe('Root') // => все еще Root компонент
+```
+
+Причина такого поведения в том, что `RootComponent` и `ChildComponent` используют одинаковый DOM узел, и только первый соответствующий компонент включен для каждого уникального DOM узла
+:::
+
+:::info 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
+```
+:::
+
+### findAllComponents
+
+**Сигнатура:**
+
+```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[]
+```
+
+**Подробности:**
+
+Похож на `findComponent`, но находит все экземпляры Vue компонентов, который совпадают с селектором. Вернет массив `VueWrapper`.
+
+:::warning
+`ref` синтаксис не поддерживается в `findAllComponents`. Все остальные синтаксисы запросов будут работать.
+:::
+
+`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)
+
+  // Вернет массив VueWrapper
+  wrapper.findAllComponents('[data-test="number"]')
+})
+```
+
+:::warning Использование с  CSS селекторами
+`findAllComponents` имеет одинаковое поведение при использовании с CSS селектором, как [findComponent](#findcomponent)
+:::
+
+### get
+
+Получит элемент и вернет `DOMWrapper`, если найден. В противном случае выбросит ошибку.
+
+**Сигнатура:**
+
+```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'>
+```
+
+**Подробности:**
+
+Он похож на `find`, но `get` выбросит ошибку, если элемент не найден, в то время как [`find`](#find) вернет ErrorWrapper.
+
+Как правило, всегда используйте `get`, исключая, когда вы проверяете что-то, что не существует. В этом случае используйте [`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') //=> найден; вернет DOMWrapper
+
+  expect(() => wrapper.get('.not-there')).toThrowError()
+})
+```
+
+### getComponent
+
+Получит экземпляр Vue компонента и вернет `VueWrapper`, если найден. Иначе он выбросит ошибку.
+
+**Сигнатура:**
+
+```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'>
+```
+
+**Подробности:**
+
+Он похож на `findComponent`, но `getComponent`выбросит ошибку, если экземпляр Vue компонента не найден, в том время как [`findComponent`](#findComponent) вернет ErrorWrapper.
+
+**Поддерживаемый синтаксис:**
+
+| синтаксис      | пример                       | детали                                                                                                                                                             |
+| -------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| querySelector  | `getComponent('.component')` | Соответствует стандартному селектору запросов.                                                                                                                     |
+| Component name | `getComponent({name: 'a'})`  | Соответствует PascalCase, snake-case, camelCase                                                                                                                    |
+| Component ref  | `getComponent({ref: 'ref'})` | Может использоваться только для прямых ссылок на дочерние элементы смонтированного компонента (т.е. ref должен находится на дочернем компоненте, а не внутри него) |
+| SFC            | `getComponent(Component)`    | Передать импортированный компонент напрямую                                                                                                                        |
+
+`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' }) // вернет VueWrapper
+  wrapper.getComponent(Foo) // вернет VueWrapper
+
+  expect(() => wrapper.getComponent('.not-there')).toThrowError()
+})
+```
+
+### html
+
+Вернет HTML элемента.
+
+По умолчанию результат форматируется при помощи [`js-beautify`](https://github.com/beautify-web/js-beautify), чтобы сделать снапшоты более читабельными. Используйте `raw: true` опцию, чтобы получить неформатированную html строку.
+
+**Сигнатура:**
+
+```ts
+html(): string
+html(options?: { raw?: boolean }): string
+```
+
+**Подробности:**
+
+`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
+
+Проверяет является ли элемент видимым или нет.
+
+**Сигнатура:**
+
+```ts
+isVisible(): boolean
+```
+
+**Подробности:**
+
+::: warning
+`isVisible()` работает корректно, только если оболочка прикреплена к DOM, используя [`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
+
+Возвращает `props`, переданные в Vue компонент.
+
+**Сигнатура:**
+
+```ts
+props(): { [key: string]: any }
+props(selector: string): any
+props(selector?: string): { [key: string]: any } | any
+```
+
+**Подробности:**
+
+`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
+Как правило, проверяйте влияние переданного `prop` (DOM обновление, сгенерированное событие и так далее). Это сделает тесты более мощными, чем просто проверка того, что `prop` был передан.
+:::
+
+### setData
+
+Обновляет внутреннее свойство `data` у компонента.
+
+**Сигнатура:**
+
+```ts
+setData(data: Record<string, any>): Promise<void>
+```
+
+**Подробности:**
+
+`setData` не позволяет установить новые поля, которые не были определены в компоненте.
+
+::: warning
+А также, обратите внимание, что`setData` не изменяет composition API `setup()` данные.
+:::
+
+`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
+Вы должны использовать `await`, когда вызываете `setData`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
+:::
+
+### setProps
+
+Обновляет `props` компонента.
+
+**Сигнатура:**
+
+```ts
+setProps(props: Record<string, any>): Promise<void>
+```
+
+**Подробности:**
+
+`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
+Вы должны использовать `await`, когда вызываете `setProps`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
+:::
+
+### setValue
+
+Устанавливает значение на DOM элементе. Включая:
+
+- `<input>`
+  - `type="checkbox"` и `type="radio"` обрабатываются и установится в `element.checked`.
+- `<select>`
+  - `<option>` обрабатывается и установится в `element.selected`.
+
+**Сигнатура:**
+
+```ts
+setValue(value: unknown, prop?: string): Promise<void>
+```
+
+**Подробности:**
+
+`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)
+
+  // Для select без множественного выбора
+  await wrapper.find('select').setValue('value1')
+  // Для select с множественным выбором
+  await wrapper.find('select').setValue(['value1', 'value3'])
+})
+```
+
+::: warning
+Вы должны использовать `await`, когда вызываете `setValue`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
+:::
+
+### text
+
+Возвращает текст элемента.
+
+**Сигнатура:**
+
+```ts
+text(): string
+```
+
+**Подробности:**
+
+`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
+
+Вызывает DOM событие, например `click`, `submit` или `keyup`.
+
+**Сигнатура:**
+
+```ts
+interface TriggerOptions {
+  code?: String
+  key?: String
+  keyCode?: Number
+  [custom: string]: any
+}
+
+trigger(eventString: string, options?: TriggerOptions | undefined): Promise<void>
+```
+
+**Подробности:**
+
+`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')
+})
+```
+
+Обратите внимание, что `trigger` принимает второй аргумент, чтобы передать параметры в вызываемое событие:
+
+```js
+await wrapper.trigger('keydown', { keyCode: 65 })
+```
+
+::: warning
+Вы должны использовать `await`, когда вызываете `trigger`, чтобы убедиться в том, что Vue обновит DOM до того, как тест продолжится.
+:::
+
+::: warning
+Некоторые события, например, нажатие на чекбокс изменяет его `v-model`, 
+будет работать только, если тест использует `attachTo: document.body`. 
+Иначе `change` событие не будет вызвано и `v-model` значение не изменится.
+:::
+
+### unmount
+
+Размонтирует(удаляет) приложение из DOM.
+
+**Сигнатура:**
+
+```ts
+unmount(): void
+```
+
+**Подробности:**
+
+Работает только на корневом `VueWrapper`, возвращаемый из `mount`. Полезный для ручной очистки после тестов.
+
+`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()
+  // Компонент удален из DOM.
+  // console.log вызвался с 'unmounted!'
+})
+```
+
+## Wrapper properties
+
+### vm
+
+**Сигнатура:**
+
+```ts
+vm: ComponentPublicInstance
+```
+
+**Подробности:**
+
+`Vue` экземпляр. Вы можете получить доступ ко всем [методам экземпляра](https://v3.vuejs.org/api/instance-methods.html) и [свойствам экземпляра](https://v3.vuejs.org/api/instance-properties.html).
+
+Обратите внимание, что `vm` доступен только на `VueWrapper`.
+
+:::tip
+Как правило, проверяйте влияние переданного `prop` (DOM обновление, сгенерированное событие и так далее). Это сделает тесты более мощными, чем просто проверка того, что `prop` был передан.
+:::
+
+## shallowMount
+
+Создает оболочку, которая содержит смонтированный и отрисованный Vue компонент для тестирования всех дочерних компонентов в виде заглушек.
+
+**Сигнатура:**
+
+```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
+```
+
+**Подробности:**
+
+`shallowMount` ведет себя практически, также как `mount`, но ставит заглушку на все дочерние компоненты по умолчанию. По сути `shallowMount(Component)` это псевдоним для `mount(Component, { shallow: true })`.
+
+## enableAutoUnmount
+
+**Сигнатура:**
+
+```ts
+enableAutoUnmount(hook: (callback: () => void) => void);
+disableAutoUnmount(): void;
+```
+
+**Подробности:**
+
+`enableAutoUnmount` позволяет автоматически уничтожить Vue оболочки. Логика уничтожения передается как обратный вызов в `hook` функцию.
+Распространенное использование - это использование `enableAutoUnmount` с вспомогательными функциями демонтирования, предоставленных вашим фреймворком тестирования, такой как `afterEach`:
+
+```ts
+import { enableAutoUnmount } from '@vue/test-utils'
+
+enableAutoUnmount(afterEach)
+```
+
+`disableAutoUnmount` может быть полезным, если вы хотите такое поведение только в определенным подмножествам тестов, и вы хотите явно отключить такое поведение.
+
+## flushPromises
+
+**Сигнатура:**
+
+```ts
+flushPromises(): Promise<unknown>
+```
+
+**Подробности:**
+
+`flushPromises` выполняет все разрешенные обработчики промисов. Это помогает убедиться в том, что асинхронные операции, такие как промисы или обновление DOM случаются перед их проверкой.
+
+Посмотрите [Выполнение HTTP запросов](/ru/guide/advanced/http-requests.md), чтобы увидеть пример `flushPromises` в действии.
+
+## config
+
+### config.global
+
+**Сигнатура:**
+
+```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
+}
+```
+
+**Подробности:**
+
+Вместо настройки опций монтирования на каждом тесте, вы можете настроить их для всего набора тестов. Они будут использоваться по умолчанию каждый раз, когда вы монтируете компонент. При желании вы можете переопределить ваши значения по умолчанию для каждого теста.
+
+**Пример:**
+
+Примером может быть глобальная имитация `$t` переменной из vue-i18n и компонента:
+
+`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
+Помните, что это глобальное поведение, а не для каждого теста отдельно. Возможно, вам придется включать/выключать их до и после каждого теста.
+:::
+
+## компоненты
+
+### RouterLinkStub
+
+Компонент для заглушки Vue Router `router-link` компонента, когда вы не хотите имитировать или добавлять весь роутер.
+
+Вы можете использовать этот компонент, чтобы найти `router-link` компонент в дереве рендеринга (render tree).
+
+**Использование:**
+
+Установить как заглушку в опциях монтирования:
+```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')
+```
+
+**Использование со слотом:**
+
+`RouterLinkStub` компонент поддерживает содержимое слота и вернет очень базовое значение для его свойств слота. Если вам нужны более специфические значения свойств слота для ваших тестов, рассмотрите использование [настоящего роутера](/ru/guide/advanced/vue-router.html#using-a-real-router), чтобы вы могли использовать `router-link` компонент. Как альтернатива, вы можете определить ваш собственный `RouterLinkStub` компонент с помощью копирования реализации из test-utils пакета.
diff --git a/docs/ru/guide/advanced/async-suspense.md b/docs/ru/guide/advanced/async-suspense.md
new file mode 100644
index 000000000..749d2ba9b
--- /dev/null
+++ b/docs/ru/guide/advanced/async-suspense.md
@@ -0,0 +1,151 @@
+# Асинхронное поведение
+
+Возможно, вы заметили некоторые другие части руководства используют `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` для функции теста.
diff --git a/docs/ru/guide/advanced/component-instance.md b/docs/ru/guide/advanced/component-instance.md
new file mode 100644
index 000000000..136dcecd1
--- /dev/null
+++ b/docs/ru/guide/advanced/component-instance.md
@@ -0,0 +1,84 @@
+# Экземпляр компонента
+
+[`mount`](/ru/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`
diff --git a/docs/ru/guide/advanced/http-requests.md b/docs/ru/guide/advanced/http-requests.md
new file mode 100644
index 000000000..be7f2c3f4
--- /dev/null
+++ b/docs/ru/guide/advanced/http-requests.md
@@ -0,0 +1,175 @@
+# Выполнение 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 запросов при помощи взаимодействия с компонентом делает ваш тест более устойчивым.
diff --git a/docs/ru/guide/advanced/reusability-composition.md b/docs/ru/guide/advanced/reusability-composition.md
new file mode 100644
index 000000000..448e5a3b1
--- /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
diff --git a/docs/ru/guide/advanced/slots.md b/docs/ru/guide/advanced/slots.md
new file mode 100644
index 000000000..1b291ac09
--- /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` опцию монтирования для этой цели:
+
+```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` файла, в слот опцию монтирования:
+
+```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` опцию монтирования для тестирования компонента, использующего `slot`, чтобы проверить правильность отрисовки.
+- Содержимое может быть либо строкой, либо функцией рендеринга или импортированным SFC.
+- Используйте `default` для слота по умолчанию и корректное имя для именованных слотов.
+- Слоты с ограниченной областью действия и `#` сокращение также поддерживаются.
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>')
+})
+```
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/teleport.md b/docs/ru/guide/advanced/teleport.md
new file mode 100644
index 000000000..95fcfc4eb
--- /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](/ru/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.
diff --git a/docs/ru/guide/advanced/transitions.md b/docs/ru/guide/advanced/transitions.md
new file mode 100644
index 000000000..4a2a081d7
--- /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](/ru/api/#global-stubs) в false значение
+- Вы можете создать свою собственную заглушку перехода, которая может обработать эти хуки, если необходимо.
+- Вы можете отследить предупреждения в тесте и отключить их.
+:::
diff --git a/docs/ru/guide/advanced/v-model.md b/docs/ru/guide/advanced/v-model.md
new file mode 100644
index 000000000..5acc52f5d
--- /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('£')
+})
+```
diff --git a/docs/ru/guide/advanced/vue-router.md b/docs/ru/guide/advanced/vue-router.md
new file mode 100644
index 000000000..dee0f24ca
--- /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` опцию монтирования:
+
+```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`.
diff --git a/docs/ru/guide/advanced/vuex.md b/docs/ru/guide/advanced/vuex.md
new file mode 100644
index 000000000..764522d85
--- /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` опцию монтирования.
+
+```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` опцию монтирования. Название внедряемого хранилища должно быть таким же, как название в компоненте т.е. "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` при помощи функции, которая принимает аргумент для установки определенных сценариев в тестах
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..38f3333a8
--- /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..c1e00ee4a
--- /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](/ru/api/#Wrapper-methods) - вот почему мы можем сделать `profileLink.text()` и получить текст. Ты можешь получить исходный элемент, используя `element` свойство.
+
+Есть другой тип обертки - `VueWrapper` - который возвращает [`getComponent`](/ru/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()` для имитации действий пользователя. Ты можешь найти список доступных методов [здесь](/ru/api/#Wrapper-methods).
+
+## Использование `data`
+
+Последний тест - это проверить, что ссылка на администратора отображается, когда `admin` равен `true`. Значение `false` по умолчанию, но мы можем переопределить, используя второй аргумент в `mount()`, [`параметры монтирования`](/ru/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` опция монтирования будет всегда выше по приоритету, чем другие стандартные значения.
+
+Чтобы изучить какие другие опции монтирования существуют, посмотри [`статью`](/guide/essentials/passing-data.md), либо [`api`](/ru/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` опция монтирования может быть использована для установки значений по умолчанию для компонента.
+- Используйте `get()` с `isVisible()`, чтобы убедиться в видимости элемента, находящегося в DOM
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..3ceaf10b2
--- /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 запросов](/ru/guide/advanced/http-requests.md) руководством, если ты не знаком с тестированием API вызовов.
+:::
+
+### Извлечение сложных методов
+
+Иногда компонент может содержать несколько сложных методов, выполняющих сложные вычисления или использующих несколько зависимостей.
+
+Здесь предлагается **извлекать метод и импортировать его в компонент**. Таким образом, ты можешь протестировать метод изолированно, используя Jest или любую другую программу тестирования.
+
+Он имеет дополнительные преимущества с компонентом, который легче для понимания, потому что сложная логика вынесена в другой файл.
+
+А также, если сложный метод непросто настроить или он медленно работает, ты возможно хотел бы имитировать его, чтобы сделать тест более простых и быстрым. [Создание HTTP запросов](/ru/guide/advanced/http-requests.md) - хороший пример с вполне сложной библиотекой axios!
+
+## Пишите тесты перед созданием компонента
+
+Ты не сможешь написать нетестируемый код, если ты напишешь тесты заранее!
+
+Наш [Ускоренный курс](/ru/guide/essentials/a-crash-course.md) предлагает пример, как написание тестов до написания кода, приводит к созданию тестируемых компонентов. Он также поможет тебе обнаружить и протестировать крайние случаи.
diff --git a/docs/ru/guide/essentials/event-handling.md b/docs/ru/guide/essentials/event-handling.md
new file mode 100644
index 000000000..a942fcfc0
--- /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()` до этого, не беспокойся. Он используется для имитации действий пользователя. Ты можешь узнать больше в [Формы](/ru/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/essentials/forms.md b/docs/ru/guide/essentials/forms.md
new file mode 100644
index 000000000..e683024b9
--- /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`. Как вы, возможно, уже знаете, он позволяет генерировать события для каждого элемента формы и принимать свойства, что значительно упрощает взаимодействие с элементами формы.
+
+Чтобы изменить значение поля ввода в 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`](/ru/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 изменился и верные события были сгенерированы. Старайтесь не проверять данные прямо с экземпляра компонента.
diff --git a/docs/ru/guide/essentials/passing-data.md b/docs/ru/guide/essentials/passing-data.md
new file mode 100644
index 000000000..b70f8b6cc
--- /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`, чтобы убедиться, что все работает верно.
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/). Посты в блоге.
diff --git a/docs/ru/guide/extending-vtu/plugins.md b/docs/ru/guide/extending-vtu/plugins.md
new file mode 100644
index 000000000..e1cb4cfa8
--- /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'
+
+// Локально написанный плагин, смотрите "Написание плагина"
+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)
+```
+
+## Пользовательская заглушка для плагина
+
+`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).
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` свойствами
diff --git a/docs/ru/guide/index.md b/docs/ru/guide/index.md
new file mode 100644
index 000000000..c42f767e7
--- /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/), которая делает акцент на селекторах при создании проверок. Оба инструмента используется Vue Test Utils под капотом и предоставляют те же самые API.
+
+## Что дальше? 
+
+Чтобы увидеть Vue Test Utils в действии, [попробуйте ускоренный курс](/ru/guide/essentials/a-crash-course.md), где мы создали простое Todo приложение, используя подход "сначала тест, потом реализация".
+
+Документация разделена на 2 главных раздела:
+
+- **Основы**: покрывает основные случаи использования, с которыми вы столкнетесь, при тестировании Vue компонентов.
+- **Углубленно**: исследует продвинутые возможности библиотеки.
+
+Вы также можете изучить полную [API](/ru/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.
diff --git a/docs/ru/migration/index.md b/docs/ru/migration/index.md
new file mode 100644
index 000000000..b02d96520
--- /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` |
+
+### Параметры монтирования
+
+| опция            | заметки                                                                                         |
+| ---------------- | ----------------------------------------------------------------------------------------------- |
+| 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     | удалено                                                                                                      |