es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vuex + Jest + Composition API: Cómo verificar si una acción ha sido llamada.

22 Jul, 2023 Programación

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?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    import { key, store } from '@/store';

describe("Prueba del componente Home", () => {
  const wrapper = mount(Home, {
    global: {
      plugins: [[store, key]],
    },
  });

  it("Prueba de onChangeValue", () => {
    const mockAction = jest.fn();
    jest.spyOn(store, "dispatch").mockImplementation(mockAction);

    const child = wrapper.findComponent(Child);

    child.vm.$emit("onChangeValue", "Hola, mundo");

    expect(mockAction).toHaveBeenCalledWith("changeValueAction", {
      value: "Hola, mundo",
    });
  });
});

    En el ejemplo anterior, creamos una función de burla utilizando jest.fn() y luego espiamos en el método store.dispatch para reemplazarlo con la función de burla utilizando jest.spyOn.

    Luego, llamamos a child.vm.$emit para simular un cambio en el componente hijo que activa la devolución de llamada onChangeValue.

    Finalmente, verificamos que nuestra acción simulada haya sido llamada con los argumentos esperados utilizando expect(mockAction).toHaveBeenCalledWith().

Comments are closed.