Понимание слотов и их роль в тестировании

Слоты в Vue — это механизм, позволяющий компонентам быть более гибкими и настраиваемыми за счёт передачи им содержимого извне. Тестирование компонентов со слотами требует особого подхода, так как слоты влияют на структуру DOM, поведение и визуальное отображение компонента. Понимание принципов работы слотов критично для написания надежных тестов.

Типы слотов

  1. По умолчанию (Default Slot) Это основной слот, в который вставляется контент без указания имени. Он применяется, когда компонент должен принимать произвольное содержимое.

    <MyComponent>
  <p>Контент по умолчанию</p>
</MyComponent>

  2. Именованные слоты (Named Slots) Позволяют различать несколько областей компонента для вставки контента. Используются атрибут name на <slot> и соответствующий v-slot:name при передаче содержимого.

    <MyComponent>
  <template v-slot:header>
    <h1>Заголовок</h1>
  </template>
  <template v-slot:footer>
    <p>Подвал</p>
  </template>
</MyComponent>

  3. Слоты с пропсами (Scoped Slots) Передают данные от компонента родителю, позволяя родительскому контенту динамически изменяться на основе состояния компонента.

    <MyComponent>
  <template v-slot:item="slotProps">
    <p>{{ slotProps.text }}</p>
  </template>
</MyComponent>

Важность тестирования слотов

Слоты могут изменять поведение компонента, добавлять новые элементы в DOM и влиять на рендеринг. Неправильная работа слотов может привести к нарушению интерфейса или логики компонента. Тестирование слотов помогает:

  • Проверять корректность вставки контента.
  • Убедиться, что именованные и scoped слоты передают данные правильно.
  • Контролировать взаимодействие слотов с событиями компонента.

Тестирование слотов с Vue Test Utils

Vue Test Utils предоставляет гибкие методы для работы с компонентами и их слотами.

Mount с контентом слота

Для тестирования слота используется опция slots при вызове mount или shallowMount.

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

test('рендерит контент по умолчанию', () => {
  const wrapper = mount(MyComponent, {
    slots: {
      default: '<p>Контент слота</p>'
    }
  })
  expect(wrapper.html()).toContain('Контент слота')
})

Именованные слоты

Именованные слоты передаются объектом с ключами, соответствующими имени слота.

const wrapper = mount(MyComponent, {
  slots: {
    header: '<h1>Заголовок</h1>',
    footer: '<p>Подвал</p>'
  }
})
expect(wrapper.find('h1').text()).toBe('Заголовок')
expect(wrapper.find('p').text()).toBe('Подвал')

Scoped слоты

Для scoped слотов необходимо использовать функцию, возвращающую строку с разметкой или компонент.

const wrapper = mount(MyComponent, {
  slots: {
    item: `<template #item="{ text }"><span>{{ text }}</span></template>`
  }
})
expect(wrapper.find('span').exists()).toBe(true)

Проверка событий через слоты

Если слот содержит элементы с событиями, можно тестировать их через trigger.

const wrapper = mount(MyComponent, {
  slots: {
    default: '<button @click="$emit(\'clicked\')">Клик</button>'
  }
})
wrapper.find('button').trigger('click')
expect(wrapper.emitted('clicked')).toBeTruthy()

Практические рекомендации

  • Минимизировать shallowMount для компонентов со сложными слотами, чтобы не потерять структуру вложенных элементов.
  • Использовать селекторы для проверки контента внутри слотов. wrapper.find или wrapper.findAll позволяют проверять конкретные элементы.
  • Тестировать реактивность пропсов слотов, особенно для scoped slots, чтобы убедиться, что данные обновляются корректно.
  • Проверять комбинации слотов, если компонент принимает несколько именованных слотов одновременно.
  • Избегать тестирования внутренней реализации слотов; лучше проверять конечный результат рендеринга и поведения.

Частые ошибки при тестировании слотов

  • Передача содержимого слота как строки без <template> для scoped slots — приведет к неправильной привязке пропсов.
  • Использование shallowMount для компонентов с глубокими слотами, что скрывает содержимое и нарушает проверку DOM.
  • Игнорирование событий внутри слотов, из-за чего тесты не фиксируют реальные сценарии использования.
  • Попытка тестировать слоты напрямую как методы компонента вместо проверки рендеринга через DOM.

Интеграция слотов с Jest и Vue Test Utils

Слоты часто проверяются совместно с Jest, что позволяет писать комплексные тесты:

import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent слоты', () => {
  it('рендерит несколько слотов', () => {
    const wrapper = mount(MyComponent, {
      slots: {
        header: '<h1>Заголовок</h1>',
        default: '<p>Основной контент</p>',
        footer: '<footer>Футер</footer>'
      }
    })
    expect(wrapper.find('h1').text()).toBe('Заголовок')
    expect(wrapper.find('p').text()).toBe('Основной контент')
    expect(wrapper.find('footer').text()).toBe('Футер')
  })
})

Тестирование слотов позволяет убедиться в полной корректности передачи и отображения контента, обеспечивая надежность компонентов и предотвращая регрессии при изменении кода.

Оглавление