Ожидание изменений состояния (await wrapper.vm.$nextTick())

В Vue компоненты работают асинхронно: изменения состояния данных (reactive data) не отражаются мгновенно в DOM. Это связано с механизмом реактивности Vue и системой обновления очереди (update queue), которая оптимизирует перерисовку компонента, объединяя несколько изменений в одну итерацию. При тестировании компонентов это поведение необходимо учитывать, иначе проверки состояния DOM или вычисляемых свойств могут выполняться преждевременно.

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

Основной синтаксис

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

test('обновление текста после изменения состояния', async () => {
  const wrapper = mount(MyComponent);
  wrapper.setData({ message: 'Привет, Vue!' });

  await wrapper.vm.$nextTick();

  expect(wrapper.text()).toContain('Привет, Vue!');
});

Здесь ключевые моменты:

wrapper.setData({ message: '...' }) изменяет реактивное свойство message.
Без await wrapper.vm.$nextTick() wrapper.text() может вернуть старое значение, так как DOM еще не обновился.
$nextTick() возвращает Promise, поэтому удобно использовать async/await для последовательного кода теста.

Разница между `setData` и `$nextTick()`

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

wrapper.setData({ counter: 1 });
// DOM еще не обновлен
await wrapper.vm.$nextTick();
// Теперь DOM обновлен и можно проверить текст или атрибуты

Без $nextTick() проверка wrapper.text() или wrapper.find('selector').text() может дать неверный результат.

Использование с событиями

Асинхронные события в Vue также требуют ожидания обновления. Например, если клик по кнопке изменяет состояние:

const wrapper = mount(MyComponent);
await wrapper.find('button').trigger('click');
await wrapper.vm.$nextTick();

expect(wrapper.text()).toContain('Клик зарегистрирован');

trigger('click') вызывает обработчик события, который изменяет реактивные данные.
Без $nextTick() DOM может еще не отобразить изменения.

Объединение нескольких изменений

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

wrapper.setData({ a: 1 });
wrapper.setData({ b: 2 });

// Ожидаем завершения всех обновлений
await wrapper.vm.$nextTick();

expect(wrapper.vm.a).toBe(1);
expect(wrapper.vm.b).toBe(2);

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

Работа с асинхронными методами компонента

Если компонент использует асинхронные методы (async/await), $nextTick() гарантирует корректное состояние после их выполнения:

await wrapper.vm.asyncMethod();
await wrapper.vm.$nextTick();

expect(wrapper.find('.status').text()).toBe('Готово');

Здесь важно дождаться не только завершения метода, но и обновления DOM.

Отличие от `flushPromises`

flushPromises используется для ожидания завершения всех промисов, но не гарантирует обновление DOM Vue после изменения реактивных данных. $nextTick() напрямую синхронизируется с циклом Vue, поэтому при проверке интерфейса его использование критично.