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

Question

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

Vinicius Cainelli · Accepted Answer · 2021-10-11 17:27:03Z

0

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

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

answered Oct 11, 2021 at 17:27

Vinicius Cainelli

1,0549 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related