javascriptvue.jsjestjstesting-libraryvue-testing-library

@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


Solution

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

    jest.mock('lodash.debounce', () => jest.fn((fn) => fn));