Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

375
Vistas
@testing-library/vue :: testing emit an event on VueJS component using debounce

I'm trying to test an emitted event by an input field, which has a debounce on update method.

Without debounce, the test passed, without problems.

Here's a piece of the code.

import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import debounce from 'lodash.debounce';

const template = {
  template: '<input v-model="searchText" @input="update" type="search" />',
  data() {
    return {
      searchText: '',
    };
  },
  methods: {
    update: debounce(function (e) {
      this.searchText = e.target.value;
      if (this.searchText.length >= 3) this.$emit('update-items', this.searchText);
    }, 300),
  },
};

it('should emit [update-items] event if the query length typed on search input field is equal os greater than three', async () => {
  // * Arrange

  // * Act
  const { container, emitted } = await render(template);

  const el = container.querySelector('input');
  await userEvent.type(el, 'abcd');

  // * Assert
  expect(emitted()).toHaveProperty('update-items'); // ! FAIL
});

The original is here: https://gist.github.com/vicainelli/cf614ef7d7967684ebab6cae8290033e

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I figure out, I just had to mock lodash.debounce dependencie

jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda