Как правильно тестировать onMounted и watch при использовании Vue Test Utils для Vue 3?

  • 18 августа 2023 г. 8:56
Ответы на вопрос 1
Вот пример тестирования `watch` с использованием Vue Test Utils для Vue 3:

```javascript
import { shallowMount } from '@vue/test-utils';
import CompName from '@/components/CompName.vue';

describe('CompName', () => {
  it('watch src', async () => {
    const wrapper = shallowMount(CompName);
    const loadImage = jest.fn();

    wrapper.vm.$watch('src', loadImage);

    await wrapper.setProps({ src: 'new-image.jpg' });

    expect(loadImage).toHaveBeenCalled();
  });
});
```

В этом примере мы создаем компонент `CompName` с помощью `shallowMount`. Затем мы определяем функцию `loadImage`, которую мы хотим вызвать при изменении свойства `src`. 

Далее мы используем `wrapper.vm.$watch('src', loadImage)` для установки наблюдателя за свойством `src` и вызова `loadImage` при его изменении.

Затем мы вызываем `await wrapper.setProps({ src: 'new-image.jpg' })`, чтобы изменить свойство `src` компонента. В результате этого наблюдатель вызывается, и функция `loadImage` должна быть вызвана. 

В конце мы используем `expect(loadImage).toHaveBeenCalled()`, чтобы проверить, что функция `loadImage` действительно была вызвана.
Похожие вопросы