Зависимые computed свойства

В Vue.js computed свойства представляют собой реактивные вычисления, которые зависят от других реактивных данных или состояний компонента. Они кэшируются до тех пор, пока их зависимости не изменятся, что обеспечивает высокую производительность. При тестировании компонентов с помощью Vue Test Utils важно понимать, как эти зависимости влияют на поведение компонента и на результаты тестов.

Основы тестирования computed свойств

Computed свойства не вызываются напрямую через методы компонента, их значение доступно через экземпляр компонента или через wrapper:

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

const wrapper = mount(MyComponent);

console.log(wrapper.vm.computedProperty);

Здесь computedProperty вычисляется автоматически на основе текущих реактивных данных компонента. Изменение зависимых данных обновляет значение computed свойства.

Проверка зависимости computed свойства от пропсов

Computed свойства часто зависят от props. В тестах это проверяется путем передачи различных значений пропсов при монтировании компонента или обновлении их через setProps.

const wrapper = mount(MyComponent, {
  props: { value: 10 }
});

expect(wrapper.vm.doubleValue).toBe(20);

await wrapper.setProps({ value: 15 });
expect(wrapper.vm.doubleValue).toBe(30);

Важный момент: computed свойства автоматически пересчитываются при изменении зависимостей, поэтому после setProps следует использовать await, чтобы дождаться реактивного обновления.

Влияние реактивного состояния на computed

Если computed свойство зависит от data или ref, тестирование включает изменение состояния и проверку нового значения свойства.

wrapper.vm.count = 5;
await wrapper.vm.$nextTick();
expect(wrapper.vm.squaredCount).toBe(25);

$nextTick() необходим для того, чтобы Vue успел обновить реактивные зависимости перед проверкой.

Тестирование цепочек зависимых computed свойств

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

computed: {
  first() {
    return this.num * 2;
  },
  second() {
    return this.first + 3;
  }
}

Тестирование цепочек требует изменения исходного состояния и проверки всех зависимых свойств:

wrapper.vm.num = 4;
await wrapper.vm.$nextTick();

expect(wrapper.vm.first).toBe(8);
expect(wrapper.vm.second).toBe(11);

Важно понимать, что Vue автоматически отслеживает все зависимости и пересчитывает все связанные computed свойства.

Мокирование зависимостей для unit-тестов

Для изолированного тестирования можно мокировать зависимости computed свойства. Это полезно, если зависимость сложная или требует обращения к внешним данным.

const wrapper = mount(MyComponent, {
  computed: {
    first: () => 100
  }
});

expect(wrapper.vm.second).toBe(103);

Такой подход позволяет тестировать поведение computed свойств без необходимости воспроизводить весь контекст компонента.

Проверка реактивного поведения при событиях

Computed свойства часто зависят от данных, которые изменяются в результате пользовательских действий. Тестирование включает имитацию событий:

await wrapper.find('button').trigger('click');

expect(wrapper.vm.count).toBe(1);
expect(wrapper.vm.doubleCount).toBe(2);

Здесь doubleCount — computed, зависящее от count. При изменении count после события значение doubleCount автоматически пересчитывается.

Рекомендации по написанию тестов

  • Всегда использовать await wrapper.vm.$nextTick() после изменения реактивного состояния.
  • Проверять не только результат, но и корректность пересчета при изменении зависимостей.
  • Для сложных цепочек computed свойств тестировать каждую зависимость по отдельности и в комбинации.
  • Мокирование computed свойств ускоряет тесты и упрощает изоляцию логики.

Примеры типичных ошибок

  1. Отсутствие await $nextTick() — тест проверяет старое значение, так как реактивное обновление еще не произошло.
  2. Изменение данных напрямую без setProps — пропсы не реактивны в тесте после монтирования, для них следует использовать setProps.
  3. Игнорирование цепочек зависимостей — тест проверяет только конечное computed свойство, не контролируя промежуточные вычисления, что может скрыть ошибки.

Итоговое понимание

В Vue Test Utils зависимые computed свойства тестируются через:

  • изменение data, props и других реактивных источников,
  • ожидание обновления реактивной системы ($nextTick()),
  • проверку пересчета цепочек computed свойств,
  • при необходимости мокирование для изоляции логики.

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

Оглавление