Когда в тестах Vue.js компонентов используется shallowMount?

Когда использовать shallowMount в тестах Vue.js компонентов

shallowMount — это метод из библиотеки @vue/test-utils, который монтирует Vue-компонент, но при этом заглушает (stubs) все его дочерние компоненты. Это ключевое отличие от mount, который полностью рендерит компонент вместе со всеми его потомками.

Основные сценарии использования shallowMount

1. Изолированное тестирование компонента

Идеальный вариант, когда вам нужно протестировать логику и разметку конкретного компонента, не беспокоясь о корректности или побочных эффектах его дочерних компонентов.

// Пример: тестирование родительского компонента без рендеринга ChildComponent
import { shallowMount } from '@vue/test-utils'
import ParentComponent from '@/components/ParentComponent.vue'
import ChildComponent from '@/components/ChildComponent.vue'

describe('ParentComponent', () => {
  it('отображает заголовок', () => {
    const wrapper = shallowMount(ParentComponent)
    expect(wrapper.find('h1').text()).toBe('Мой компонент')
  })
  
  it('содержит заглушенный ChildComponent', () => {
    const wrapper = shallowMount(ParentComponent)
    // ChildComponent будет заглушен, а не реально отрендерен
    expect(wrapper.findComponent(ChildComponent).exists()).toBe(true)
  })
})

2. Избежание сложных зависимостей

Когда дочерние компоненты имеют сложные зависимости (store, роутинг, API-запросы), shallowMount позволяет избежать их настройки в тестах родительского компонента.

// Без shallowMount пришлось бы мокать все зависимости ChildComponent
import ComplexChild from '@/components/ComplexChild.vue'

describe('ParentWithComplexChildren', () => {
  it('работает без настройки зависимостей дочерних', () => {
    const wrapper = shallowMount(ParentWithComplexChildren)
    // Не нужно мокать store, router и т.д. для ComplexChild
    expect(wrapper.vm.someData).toBeDefined()
  })
})

3. Ускорение выполнения тестов

Поскольку дочерние компоненты не рендерятся, тесты выполняются быстрее. Это особенно важно в больших проектах с сотнями тестов.

4. Фокус на интерфейсе компонента

Тестируя публичный интерфейс компонента (props, events, slots) без погружения в реализацию его детей.

describe('FormComponent', () => {
  it('эмитит submit-событие', async () => {
    const wrapper = shallowMount(FormComponent)
    await wrapper.find('form').trigger('submit.prevent')
    expect(wrapper.emitted('submit')).toBeTruthy()
  })
})

Когда НЕ использовать shallowMount

1. Тестирование интеграции компонентов

Если нужно убедиться, что родительский и дочерний компоненты правильно взаимодействуют, используйте mount.

// Интеграционный тест требует mount
it('передает правильные props дочернему компоненту', () => {
  const wrapper = mount(ParentComponent)
  const child = wrapper.findComponent(ChildComponent)
  expect(child.props('someProp')).toBe('expectedValue')
})

2. Тестирование функциональности, зависящей от DOM-структуры

Если поведение компонента зависит от реального DOM, созданного дочерними компонентами (например, вычисление высоты, позиционирование).

3. Snapshot-тестирование

Для snapshot-тестов обычно нужен полный рендеринг, поэтому mount предпочтительнее.

Практический пример сравнения

// Компонент Parent.vue
<template>
  <div>
    <h2>Родитель</h2>
    <Child :message="msg" @update="handleUpdate" />
    <p>{{ result }}</p>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return { msg: 'Привет', result: '' }
  },
  methods: {
    handleUpdate(val) {
      this.result = val
    }
  }
}
</script>

// Тест с shallowMount
describe('Parent с shallowMount', () => {
  it('заглушает Child и тестирует родителя изолированно', () => {
    const wrapper = shallowMount(Parent)
    // Child заменен заглушкой
    expect(wrapper.find('h2').text()).toBe('Родитель')
    // Можно проверить, что Child компонент существует как заглушка
    expect(wrapper.findComponent({ name: 'Child' }).exists()).toBe(true)
  })
})

// Тест с mount
describe('Parent с mount', () => {
  it('полностью рендерит Child и тестирует интеграцию', () => {
    const wrapper = mount(Parent)
    // Реальный Child компонент отрендерен
    expect(wrapper.findComponent(Child).vm.message).toBe('Привет')
    // Можно проверить реальное взаимодействие
    wrapper.findComponent(Child).vm.$emit('update', 'Новое значение')
    expect(wrapper.vm.result).toBe('Новое значение')
  })
})

Рекомендации по выбору

1. Начинайте с shallowMount для юнит-тестов отдельных компонентов
2. Используйте mount для:
   • Критических путей взаимодействия между компонентами
   • Компонентов с минимальным количеством детей
   • Когда нужно протестировать полную DOM-структуру
3. Комбинируйте подходы: в проекте могут быть как изолированные shallow-тесты, так и интеграционные тесты с mount

shallowMount — это инструмент для создания быстрых, изолированных и поддерживаемых тестов, который позволяет сосредоточиться на тестировании одного компонента за раз, соблюдая принцип единой ответственности в тестировании.