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>

text-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使用composition 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-测试输入组件事件发出

1 个答案: