@testing-library/vue :: 测试使用 debounce 在 VueJS 组件上发出一个事件

Question

我正在尝试通过输入字段测试发出的事件，该输入字段具有更新方法的去抖动。

没有去抖，测试通过，没有问题。

这是一段代码。

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

Answer 1

我明白了，我只需要模拟 lodash.debounce dependencie

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

@testing-library/vue :: 测试使用 debounce 在 VueJS 组件上发出一个事件

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

javascript

vue.js

jestjs

testing-library

vue-testing-library