vue组件在使用jest进行测试时会产生意想不到的值。

Question

描述

我有一个BaseCheckbox组件，它使用"value“支柱来呈现复选框。当我单击标记时，组件会发出event.target.checked。使用jest进行测试时，event.target.checked不会更改，并且发出与支柱相同的值。在浏览器中运行时，每次单击和每次发出与值支柱相反的值时，event.target.checked都会正确更改(我通过在BaseCheckbox.vue中添加console.log进行了检查)。

Vue组件

<template>
  <div class="custom-checkbox">
    <div v-if="value" class="checkmark"></div>
    <input :checked="value" type="checkbox" @change="onChange" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    onChange(event) {
      console.log(event.target.checked);
      this.$emit("input", event.target.checked);
    }
  }
};
</script>

2号考试失败的期望值

it("should emit 'input' event with value payload", () => {
        wrapper.setProps({ value: true });
        expect(wrapper.vm.$props.value).toEqual(true);
        wrapper.find("input").trigger("change");
        expect(wrapper.emitted().input[0]).toEqual([false]);
})

预期：发出与值支柱相反的值

实战：在玩笑中:发射与值支柱相同的值，browser:发射与值支柱相反的值。

错误消息

 FAIL  tests/components/baseComponents/BaseCheckbox.spec.js
  BaseCheckbox
    ✓ should show checkmark when value is true (6ms)
    ✓ should not show checkmark when value is false (3ms)
    ✕ should emit 'input' event with value payload (84ms)

  ● BaseCheckbox › should emit 'input' event with value payload

    expect(received).toEqual(expected)

    Expected value to equal:
      [false]
    Received:
      [true]

    Difference:

    - Expected
    + Received

      Array [
    -   false,
    +   true,
      ]

      23 |         expect(wrapper.vm.$props.value).toEqual(true);
      24 |         wrapper.find("input").trigger("change");
    > 25 |         expect(wrapper.emitted().input[0]).toEqual([false]);
         |                                            ^
      26 |     })
      27 | })
      28 | 

      at Object.toEqual (tests/components/baseComponents/BaseCheckbox.spec.js:25:44)

  console.log src/components/baseComponents/BaseCheckbox.vue:18
    true

Test Suites: 1 failed, 1 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        5.435s

Answer 1

我自己想出来的。Vue-Test-Utils为这个精确的使用提供了一个函数。

https://vue-test-utils.vuejs.org/api/wrapper/#setchecked

最终工作试验

it("should emit 'input' event with value payload", () => {
        wrapper.setProps({ value: true });
        wrapper.find("input").setChecked(false);
        expect(wrapper.emitted().input[0]).toEqual([false]);
})