@ testing -library/vue :：testing使用去反跳在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的依赖

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