Значения props по умолчанию

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

Определение значений по умолчанию в компоненте

В Vue 3 props с дефолтными значениями определяются в объекте props следующим образом:

export default {
  props: {
    title: {
      type: String,
      default: 'Заголовок по умолчанию'
    },
    count: {
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default: () => []
    }
  }
}

Ключевые моменты:

  • Для примитивов (String, Number, Boolean) значение по умолчанию может быть задано напрямую через default.
  • Для объектов и массивов обязателен возврат нового экземпляра через функцию, чтобы избежать разделения состояния между инстансами компонента.

Проверка значений по умолчанию с Vue Test Utils

При использовании Vue Test Utils для тестирования значений props по умолчанию основным инструментом является функция mount. Она позволяет создавать экземпляр компонента с возможностью указания или пропуска props.

Пример теста на значения по умолчанию:

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

describe('MyComponent', () => {
  it('должен использовать значение по умолчанию для props', () => {
    const wrapper = mount(MyComponent)
    
    // Проверка примитивного prop
    expect(wrapper.props('title')).toBe('Заголовок по умолчанию')
    
    // Проверка числового prop
    expect(wrapper.props('count')).toBe(0)
    
    // Проверка массива
    expect(wrapper.props('options')).toEqual([])
  })
})

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

Замена значений по умолчанию при тестировании

Тестирование также должно проверять корректность работы компонента при передаче пользовательских значений props. Это делается через передачу объекта props в функцию mount:

const wrapper = mount(MyComponent, {
  props: {
    title: 'Новый заголовок',
    count: 5,
    options: ['a', 'b', 'c']
  }
})

expect(wrapper.props('title')).toBe('Новый заголовок')
expect(wrapper.props('count')).toBe(5)
expect(wrapper.props('options')).toEqual(['a', 'b', 'c'])

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

Взаимодействие с computed и reactive свойствами

Props с дефолтными значениями часто используются внутри computed или реактивных данных компонента. Тестирование должно учитывать, что reactive зависимости и computed свойства корректно реагируют на изменения props, включая значения по умолчанию:

export default {
  props: {
    multiplier: {
      type: Number,
      default: 2
    }
  },
  computed: {
    doubled() {
      return this.multiplier * 2
    }
  }
}

Тест:

it('computed doubled учитывает значение по умолчанию', () => {
  const wrapper = mount(MyComponent)
  expect(wrapper.vm.doubled).toBe(4)

  wrapper.setProps({ multiplier: 3 })
  expect(wrapper.vm.doubled).toBe(6)
})

Особенности объектов и массивов по умолчанию

Одной из частых ошибок является совместное использование одного объекта или массива по умолчанию между инстансами компонента. Vue рекомендует использовать функцию, возвращающую новый объект или массив:

props: {
  config: {
    type: Object,
    default: () => ({ darkMode: false })
  }
}

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

const wrapper1 = mount(MyComponent)
const wrapper2 = mount(MyComponent)

wrapper1.vm.config.darkMode = true

expect(wrapper2.vm.config.darkMode).toBe(false)

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

  • Проверять значения по умолчанию для всех props, особенно для объектов и массивов.
  • Использовать wrapper.props() для чтения текущих значений props.
  • Тестировать реактивность computed и методов, зависящих от props.
  • Убедиться, что изменение props через setProps корректно обновляет состояние компонента.
  • Для массивов и объектов использовать toEqual вместо toBe при проверке значений в тестах.

Проверка поведения при отсутствии props

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

it('корректно отображает UI без переданных props', () => {
  const wrapper = mount(MyComponent)
  expect(wrapper.text()).toContain('Заголовок по умолчанию')
})

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

Значения props по умолчанию являются ключевым аспектом проектирования компонентов и их тестирования. Они обеспечивают стабильность, предсказуемость и упрощают проверку поведения компонента в различных сценариях, от минимального набора данных до полностью кастомизированного состояния.

Оглавление