@testing-library/vue :: 测试使用 debounce 在 VueJS 组件上发出一个事件
@testing-library/vue :: testing emit an event on VueJS component using debounce
我正在尝试通过输入字段测试发出的事件,该输入字段具有更新方法的去抖动。
没有去抖,测试通过,没有问题。
这是一段代码。
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
});
原文在这里:https://gist.github.com/vicainelli/cf614ef7d7967684ebab6cae8290033e
我明白了,我只需要模拟 lodash.debounce
dependencie
jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
我正在尝试通过输入字段测试发出的事件,该输入字段具有更新方法的去抖动。
没有去抖,测试通过,没有问题。
这是一段代码。
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
});
原文在这里:https://gist.github.com/vicainelli/cf614ef7d7967684ebab6cae8290033e
我明白了,我只需要模拟 lodash.debounce
dependencie
jest.mock('lodash.debounce', () => jest.fn((fn) => fn));