Как проверить компонент Vue на наличие ошибок консоли? - PullRequest
Новая
       89

Как проверить компонент Vue на наличие ошибок консоли?

0 голосов
/ 22 февраля 2020

Концепция тестирования Vue / Js для меня нова, так что терпите меня. Обычно, если есть ошибки, связанные с компонентом Vue, я вижу их в консоли браузера.

, например, если у меня есть компонент Vue: 

<template>
    <div>
        {{ number }}
    </div>
</template>

<script>
export default {}
</script>

, я увижу ошибка, подобная этой: [Vue warn]: Property or method "number" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Теперь, когда я хочу проверить указанный компонент c с помощью инструментов тестирования, как я могу проверить ошибки такого рода, я хочу убедиться, что компонент загружен без этих ошибок.

Сегодня я попытался использовать Jset, чтобы проверить это, и я закончил с этим: 

import { mount } from '@vue/test-utils'
import Component from '../Components/Example.vue'

test('it renders without errors', () => {
    const wrapper = mount(Component)
    expect(wrapper.isVueInstance()).toBe(true);
})

, но этого не происходит, поскольку он всегда возвращает true, даже хотя «число» не определено. Как я могу проверить, загружен ли компонент без ошибок консоли.

1 Ответ

0 голосов
/ 22 февраля 2020

Это не ошибка, а предупреждение , это причина, по которой компонент выполняет рендеринг.

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

console.error вызовы могут быть дополнительно отслежены для усиления теста, но в этом случае это полностью избыточно: 

spyOn(console, 'error');
const wrapper = mount(Component);
expect(wrapper.find('div').text()).toContain('123456'); // easier to do with a snapshot
expect(console.error).not.toHaveBeenCalled();

Обратите внимание, что console и некоторые другие встроенные методы следует тщательно отслеживать и подвергать насмешкам, поскольку они мешают тестированию отчетов об ошибках.

...