Тестирование обработки неправильных props

При работе с Vue-компонентами важным аспектом является корректная обработка входных данных, передаваемых через props. Неправильные или отсутствующие значения props могут приводить к ошибкам в работе компонентов или некорректному отображению интерфейса. Vue Test Utils предоставляет удобные инструменты для проверки того, как компонент реагирует на некорректные входные данные.

Валидация `props` в Vue

Каждый компонент может определять типы props и задавать значения по умолчанию. Например:

export default {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  }
}

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

Монтирование компонента с неправильными `props`

Vue Test Utils позволяет создавать экземпляр компонента с различными значениями props через метод mount:

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

describe('MyComponent', () => {
  it('должен корректно обрабатывать неправильный тип prop', () => {
    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
    
    mount(MyComponent, {
      props: {
        title: 123  // передаем число вместо строки
      }
    })
    
    expect(consoleSpy).toHaveBeenCalled()
    consoleSpy.mockRestore()
  })
})

Ключевой момент здесь — использование шпиона на console.error. Vue выводит предупреждения о несоответствии типов props, и тест может проверять их наличие.

Тестирование отсутствующих обязательных `props`

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

it('должен выводить предупреждение, если обязательный prop отсутствует', () => {
  const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})

  mount(MyComponent, {
    props: {
      // title отсутствует
    }
  })

  expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Missing required prop: "title"'))
  consoleSpy.mockRestore()
})

Такой подход помогает выявлять ошибки на ранней стадии разработки и предотвращать сбои интерфейса в продакшн-сборке.

Проверка поведения компонента при неправильных значениях

Некоторые компоненты могут содержать внутреннюю логику для обработки некорректных props. В этом случае тесты должны проверять корректность рендеринга и состояния:

it('должен устанавливать значение по умолчанию при некорректном prop', () => {
  const wrapper = mount(MyComponent, {
    props: {
      count: 'не число'  // некорректный тип
    }
  })

  expect(wrapper.props('count')).toBe(0)  // значение по умолчанию
  expect(wrapper.text()).toContain('0')
})

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

Тестирование пользовательских валидаторов

Vue позволяет создавать собственные функции валидации props:

props: {
  age: {
    type: Number,
    validator: value => value >= 0 && value <= 120
  }
}

Для таких props тесты проверяют как корректные, так и некорректные значения:

it('валидатор age отклоняет отрицательные числа', () => {
  const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
  
  mount(MyComponent, {
    props: { age: -5 }
  })
  
  expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('custom validator check failed for prop "age"'))
  consoleSpy.mockRestore()
})

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

Совмещение с snapshot-тестированием

Некорректные props могут влиять на разметку компонента. Snapshot-тесты позволяют фиксировать изменения рендера при различных значениях props:

it('рендер при некорректном prop соответствует snapshot', () => {
  const wrapper = mount(MyComponent, {
    props: { title: 123 }
  })
  
  expect(wrapper.html()).toMatchSnapshot()
})

Это полезно для отслеживания визуальных изменений и предотвращения неожиданного поведения интерфейса.

Тестирование обработки неправильных props

Валидация props в Vue

Монтирование компонента с неправильными props

Тестирование отсутствующих обязательных props