如何正确触发更改事件以触发单元测试中的功能？

Question

我有一个复选框组件，由于Safari的错误，我更改了@input=input() to @change='input'因为Safari没有输入事件。复选框<template>  <div    class="checkbox">    <input      ....      @change="input">  </div></template><script>export default {  ....  methods: {    input () {      /**       * Input event on change       *       * @event input       * @type {Boolean}       */      this.$emit('input', this.$refs.checkbox.checked)    }  }}</script>单元测试  describe('...', () => {    beforeEach(async () => {      const input = wrapper.find('input')      jest.spyOn(wrapper.vm, 'input')      input.trigger('change') // told this is incorrect      jest.runAllTimers()    })    it('[positive] should emit an input event with the input\'s value', () => {      expect(wrapper.emitted().input).toBeTruthy()      expect(wrapper.emitted().input).toHaveLength(1)      expect(wrapper.emitted().input[0]).toEqual([false])    })    it('[positive] should call the input() method with the target value', () => {     // this is wrong also, because the expectation will always be true     wrapper.vm.input()      expect(wrapper.vm.input).toHaveBeenCalled()    })  })我应该如何正确设置第二项测试？为什么在单元测试中input.trigger（'change'）是错误的？

Answer 1

我的第二项测试设置为始终为真。我称这个功能

wrapper.vm.input()

然后断言它将被调用，这将是正确的，因此它是一个不好的测试。

input.trigger('change')

...是正确的，那正是我拥有的地方。这是我的重构测试：

  describe('when the checkbox state is changed', () => {

    let input

    beforeEach(() => {

      input = wrapper.find('input')

      jest.spyOn(wrapper.vm, 'input')

      jest.runAllTimers()

    })

    it('[positive] should emit an input event with the input\'s value', () => {

      input.trigger('change')

      expect(wrapper.emitted().input).toBeTruthy()

      expect(wrapper.emitted().input).toHaveLength(1)

      expect(wrapper.emitted().input[0]).toEqual([false])

    })

    it('[negative] should not emit an input event with the input\'s value', () => {

      input.trigger('input')

      expect(wrapper.emitted().input).toBeFalsy()

    })

  })