Como testar watch do Vue.js usando Jest

O Vue.js tem uma propriedade watch que serve para "observar" o valor de uma variável e ser executado sempre que esse valor for alterado.

Como essa propriedade serve para executar ações extras que não tenham alguma ligação a variável que dispara, existem alguns detalhes que devem ser seguidos para testar essa ação.

O componente exemplo para o teste é esse abaixo, tendo um data text que é usado no v-model do input

<template>
  <div>
    <input v-model="text">
    <p>Impactou: {{ otherText }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: '',
      otherText: '',
    };
  },
  watch: {
    text(value) {
      this.otherText = value;
    },
  },
};
</script>

Para testar o watch, precisamos usar um código no estilo abaixo:

  it('testing watch', async () => {
    const text = 'example value';
    const wrapper = shallowMount(App);
    const input = wrapper.find('input');

    expect(wrapper.vm.otherText).toBe('');

    input.element.value = text;
    input.trigger('input');
    await wrapper.vm.$nextTick();

    expect(wrapper.vm.otherText).toBe(text);
  });

Explicando o código:

Primeiro montamos o componente e pegamos o elemento input.

A ideia para testar o watch é sempre pegarmos o valor inicial da variável, executar a ação que ocorrerá no componente, aquela que altera a variável "assistida" pelo watch, e então verificar se houve algum efeito na variável que deveria ser afetada.

Verificando o valor antes:
expect(wrapper.vm.otherText).toBe('');

Executando a ação:
input.trigger('input');

Verificando o valor depois:
expect(wrapper.vm.otherText).toBe(text);

Como o ideal é testar um comportamento mais próximo do real, evite testar algo alterando o valor direto na instância do componente, como wrapper.vm.text = 'value'. Por isso aqui, inserimos um valor ao input e emitimos o evento input.

Detalhe

Caso o seu watch venha a verificar se um valor alterado volte ao valor padrão, será necessário executar a ação mais de uma vez, já que se você executar uma ação passando o valor igual ao valor anterior, o watch não é disparado.

Photo by Yassin Mohammadi on Unsplash