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.

  • es.davy.ai/
  • Programación /
  • Cypress Vue Component Test Runner – probando un evento emitido al hacer clic en un botón.

Cypress Vue Component Test Runner – probando un evento emitido al hacer clic en un botón.

11 Jul, 2023 Programación

Estoy teniendo problemas para descubrir cómo realizar una prueba simple de un componente Vue (usando el Cypress Component Test Runner) para ver si al hacer clic en un botón se emite un evento.

// Componente MyButton.vue
<template>
  <button data-testid="button" label="Click Button" @click="clickButton()"></button>
</template>
<script setup="" lang="ts">
import { defineEmits } from "vue";
const emit = defineEmits(["clickButtonEvent"]);

function clickButton() {
  emit("clickButtonEvent");
}
</script>

// Archivo de prueba MyButton.spec.ts
it.only("debería emitir un evento al hacer clic", () => {
  const clickButtonSpy = cy.spy().as("clickButtonEvent");

  mount(FulfilButton, {
    global: {
      components: {
        Button,
      },
    },
  })
    .get('[data-testid="button"]')
    .click();

  cy.get("@clickButtonEvent").should("have.been.called");
});

Esto no funciona, en la consola veo:

mount
get
-click

pero luego esto:

esperaba que clickButtonEvent fuera llamado al menos una vez, pero nunca se llamó

Así que supongo que no estoy conectando correctamente este cy.spy, presumiblemente porque no lo estoy haciendo como parte del montaje. ¿Qué debo hacer? El botón en sí es un componente de botón PrimeVue, pero estoy bastante seguro de que eso no debería impedirme realizar esta prueba.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el espía no se está activando correctamente. Una posible solución es utilizar wrapper.vm para acceder a la instancia del componente y activar el evento manualmente, luego asegurarse de que el espía haya sido llamado. Aquí tienes un ejemplo:

    // MyButton.spec.ts
import { mount } from '@cypress/vue';
import Button from 'primevue/button';
import MyButton from './MyButton.vue';

describe('MyButton', () => {
  it('debería emitir un evento cuando se hace clic', () => {
    const spy = cy.spy();
    mount(MyButton, {
      global: { components: { Button } },
      emits: ['clickButtonEvent'],
      // También puedes pasar el espía como un método al componente
      methods: { clickButton: spy },
    });
    cy.get('[data-testid="button"]').click();
    cy.wrap(spy).should('have.been.calledWith', {  });
  });
});

    En este ejemplo, declaramos una opción emits en la función mount para permitir que el componente emita el clickButtonEvent. También pasamos el espía como un método al componente usando la opción methods – esto es opcional y puedes optar por utilizar el enfoque de defineEmits si lo prefieres. Luego, activamos el evento de clic utilizando cy.get(...).click() y aseguramos que el espía haya sido llamado con los argumentos esperados utilizando cy.wrap(spy).should('have.been.calledWith', { }).

    Ten en cuenta que he eliminado el contenedor it.only para que se ejecuten todas las pruebas.

Comments are closed.