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
I figure out, I just had to mock lodash.debounce
dependencie
jest.mock('lodash.debounce', () => jest.fn((fn) => fn));