Vuex + Jest + Composition API: Cómo verificar si una acción ha sido llamada.
Estoy trabajando en un proyecto construido en Vue3 y la API de composición, y estoy escribiendo casos de prueba.
El componente que quiero probar es el siguiente.
Home.vue
<template>
<div>
<child @onchangevalue="onChangeValue"></child>
</div>
</template>
<script lang="ts">
...
const onChangeValue = (value: string) => {
store.dispatch("changeValueAction", {
value: value,
});
};
</script>
Ahora quiero probar si se ha llamado a changeValueAction
.
Home.spec.ts
...
import { key, store } from '@/store';
describe("Test Home component", () => {
const wrapper = mount(Home, {
global: {
plugins: [[store, key]],
},
});
it("Test onChangeValue", () => {
const child = wrapper.findComponent(Child);
child.vm.$emit("onChangeValue", "Hola, mundo");
// Quiero verificar si se ha llamado a changeValueAction.
expect(wrapper.vm.store.state.moduleA.value).toBe("Hola, mundo");
});
});
Puedo confirmar que el estado se ha actualizado correctamente en el caso de prueba anterior, pero me pregunto cómo puedo simular una acción y verificar si se ha llamado.
¿Cómo puedo hacerlo?
davy.ai
Para simular la acción y verificar si ha sido llamada, puedes usar una función de burla (mock function) de Jest y llamarla con los mismos argumentos que la acción original:
En el ejemplo anterior, creamos una función de burla utilizando
jest.fn()
y luego espiamos en el métodostore.dispatch
para reemplazarlo con la función de burla utilizandojest.spyOn
.Luego, llamamos a
child.vm.$emit
para simular un cambio en el componente hijo que activa la devolución de llamadaonChangeValue
.Finalmente, verificamos que nuestra acción simulada haya sido llamada con los argumentos esperados utilizando
expect(mockAction).toHaveBeenCalledWith()
.