Использование console.log в тестах

console.log является простым, но мощным инструментом для отладки тестов во Vue.js, особенно при работе с Vue Test Utils. Его использование позволяет отслеживать состояние компонентов, свойства и события без необходимости создавать сложные вспомогательные функции или мок-объекты.

Логирование данных компонента

При монтировании компонента с помощью mount или shallowMount можно напрямую выводить props, data и computed свойства:

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

test('вывод props и data', () => {
  const wrapper = mount(MyComponent, {
    props: { message: 'Hello Vue' }
  })

  console.log('Props:', wrapper.props())
  console.log('Dat a:', wrapper.vm.$data)
  console.log('Computed value:', wrapper.vm.computedProperty)
})
  • wrapper.props() возвращает объект с текущими пропсами компонента.
  • wrapper.vm.$data содержит реактивные данные, доступные через data().
  • wrapper.vm предоставляет доступ к методам и вычисляемым свойствам через Vue Instance.

Использование console.log на этом уровне позволяет быстро проверить, корректно ли передаются данные и инициализируются ли свойства компонента.

Отслеживание событий

Vue Test Utils предоставляет методы для симуляции событий и проверки их вызовов. console.log помогает убедиться, что события действительно эмитируются:

test('отслеживание событий', async () => {
  const wrapper = mount(MyComponent)
  
  wrapper.vm.$emit('custom-event', 42)
  console.log('Emitted events:', wrapper.emitted())

  wrapper.find('button').trigger('click')
  console.log('Events after click:', wrapper.emitted('custom-event'))
})
  • wrapper.emitted() возвращает объект с ключами событий и массивами вызовов.
  • Логирование до и после действия помогает отследить последовательность событий и аргументы, с которыми они вызываются.

Диагностика реактивности

Для сложных компонентов с реактивными зависимостями полезно логировать изменения data или props после вызова методов или симуляции пользовательских действий:

test('проверка реактивности', async () => {
  const wrapper = mount(MyComponent, { props: { count: 0 } })

  console.log('Initial count:', wrapper.vm.count)
  
  await wrapper.vm.increment()
  console.log('Count after increment:', wrapper.vm.count)

  await wrapper.setProps({ count: 5 })
  console.log('Count after prop change:', wrapper.vm.count)
})

await необходим для корректного обновления DOM и реактивных данных, особенно при использовании асинхронных методов или watchers.

Логирование состояния DOM

Vue Test Utils предоставляет методы для работы с DOM-структурой компонента. console.log помогает проверять содержимое элементов и их атрибуты:

test('проверка DOM', () => {
  const wrapper = mount(MyComponent)
  
  console.log('HTML компонента:', wrapper.html())
  console.log('Текст кнопки:', wrapper.find('button').text())
  console.log('Атрибут кнопки:', wrapper.find('button').attributes('disabled'))
})
  • wrapper.html() возвращает полное HTML-содержимое компонента.
  • wrapper.find(selector) возвращает первый элемент, подходящий под селектор, с которым можно работать дальше.
  • attributes(name) позволяет выводить атрибуты элементов для отладки состояния.

Использование console.group для структурированного вывода

Для крупных тестов с множеством логов удобно использовать console.group и console.groupEnd для группировки информации:

test('группировка логов', () => {
  const wrapper = mount(MyComponent)

  console.group('Initial state')
  console.log(wrapper.vm.$data)
  console.log(wrapper.props())
  console.groupEnd()

  console.group('After method call')
  wrapper.vm.doSomething()
  console.log(wrapper.vm.$data)
  console.groupEnd()
})

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

Рекомендации по использованию

  • console.log лучше использовать временно для отладки конкретных сценариев, а не оставлять в финальных тестах.
  • Логи помогают понять, какой элемент или метод вызывает проблему в компоненте.
  • Для проверки значений, особенно в CI/CD, предпочтительнее использовать expect, а console.log оставить как вспомогательный инструмент.
  • Комбинирование с console.table удобно для визуализации массивов и объектов:
console.table(wrapper.emitted('custom-event'))

Вывод таблицы делает проверку аргументов событий более наглядной.

Логирование ошибок и предупреждений

Vue автоматически выводит предупреждения и ошибки в консоль. Их можно перехватывать и логировать внутри тестов:

test('ловим ошибки Vue', () => {
  const spy = jest.spyOn(console, 'error').mockImplementation(() => {})

  mount(MyComponent, { props: { invalidProp: 123 } })
  console.log('Vue errors captured:', spy.mock.calls)

  spy.mockRestore()
})
  • jest.spyOn позволяет перехватывать вызовы console.error и анализировать сообщения об ошибках.
  • Это особенно полезно для проверки валидации пропсов и предупреждений Vue.

Вывод

console.log в тестах Vue Test Utils — инструмент для быстрого анализа props, data, событий и DOM. Правильное использование логирования ускоряет процесс отладки, выявляет проблемы реактивности и корректность поведения компонентов. Комбинация с console.group, console.table и перехватом ошибок позволяет структурировать информацию и получать полное представление о состоянии тестируемого компонента.

Оглавление