VueJs 3 / Composition API 和 Jest - 测试输入组件事件发射

Question

我似乎在努力测试 VueJs 3 输入组件事件发射 - 这就是我所拥有的：

TextInput

<template>
  <input v-model="input" />
</template>
<script>
import { watch } from '@vue/composition-api';
export default {
  name: 'TextInput',
  props: {
    value: {
      default: '',
    },
  },
  setup (props, { emit }) {
    let input = ref(props.value);
    watch(input, value => {
      emit('input', value);
    });
    return { input };
  }
};
</script>

正文-input.spec.js

import { shallowMount } from '@vue/test-utils';
import { TextInput } from '@/src/index';

describe('TextInput test', () => {
  it('Emits input event', async () => {
    const wrapper = shallowMount(TextInput);

    const input = wrapper.find('input');
    input.setValue('Jon');
    input.trigger('keyup');

    await wrapper.vm.$nextTick();

    const emitted = wrapper.emitted('input');

    expect(emitted).toHaveLength(1);
    expect(emitted).toEqual(['Jon']);
  });
})

运行测试出现以下错误

● TextInput test › Emits input event

    expect(received).toHaveLength(expected)

    Matcher error: received value must have a length property whose value must be a number

    Received has value: undefined

      52 |     const triggeredEvent = wrapper.emitted('input');
      53 |
    > 54 |     expect(triggeredEvent).toHaveLength(1);
         |                            ^
      55 |     expect(triggeredEvent).toEqual(['Jon']);
      56 |   });
      57 | });

当控制台记录时 emitted 我得到一个空对象 {}。

Answer 1

我终于找到了修复阅读这里的答案之一 Issues during testing #202

我需要做的是指示 Vue 使用组合 api 并稍微修改我的断言。

import Vue from 'vue';
import { TextInput } from '@/src/index';
import { shallowMount } from '@vue/test-utils';
import CompositionApi from '@vue/composition-api';

Vue.use(CompositionApi);

describe('TextInput test', () => {
  it('Emits input event', async () => {
    const wrapper = shallowMount(TextInput);

    const input = wrapper.find('input');
    input.setValue('Jon');
    input.trigger('keyup');

    await wrapper.vm.$nextTick();

    const emitted = wrapper.emitted('input');

    expect(emitted).toHaveLength(2);
    expect(emitted[1]).toEqual(['Jon']);
  });
})

VueJs 3 / Composition API 和 Jest - 测试输入组件事件发射

VueJs 3 / Composition API and Jest - testing input component event emitting

javascript

vue.js

jestjs

vuejs3

vue-composition-api