Vue Test Utils 多个输入发出重置值

Question

所以我创建了一个 vue 组件，我正在使用 vue test utils 来测试它。该组件允许用户上传一个文件，该文件更新一个数组，该数组通过输入（如下所示的代码）发出，然后用户可以访问该数组。新文件上传将添加到数组而不是替换。

意味着什么：

我上传了第一个文件，发出的输入事件显示了那个文件；然后我上传第二个文件，发出的输入事件显示该文件和第一个文件。

发生了什么：

我上传了第一个文件，发出的输入事件显示了那个文件；然后我上传第二个文件，但发出的输入只显示第二个文件。

我不确定这里发生了什么，因为当我运行在我的浏览器中测试并控制计算的文件时，我看到两个文件在执行与我的测试相同的过程后都在数组中正在做。我认为这是与它更新速度不够快有关，所以我添加了等待下一个滴答声但没有运气。这是错误还是我对测试中的事件不了解？感谢您的帮助。

组件

<template>
   <input type="file" @change="handle"/>
</template>

<script>
   export default {
       props: {
          value: {
            type: Array,
            required: false,
            default() {
                return []
            }
          }
       },

       method: {
           handle(e) {
               const files = e.target.files;

               var newFiles = [];

               for (var i = 0; i < files.length; i++) {
                    newFiles.push(files[i])
               }

               this.files = this.files.concat(newFiles)
           }
       },

       computed: {
           files: {
            get() {
                return this.value
            },

            set(val) {
                this.$emit('input', val)
            }
        }
   }

测试

it('can add to array', async () => {
    const files = [
      {
        name: 'image.png',
        size: 20000000,
        type: 'image/png',
      },
      {
        name: 'image.jpg',
        size: 20000,
        type: 'image/jpeg',
      },
    ]
    const wrapper = mount(Component)

    // Upload first file
    wrapper.vm.handle({
      target: {
        files: [files[0]],
      },
    })

    expect(wrapper.emitted().input[0]).toStrictEqual([
      [files[0]]
    ]);

    await wrapper.vm.$nextTick()

    // Upload second file
    wrapper.vm.handle({
      target: {
        files: [files[1]],
      },
    })

    expect(wrapper.emitted().input[1]).toStrictEqual([files]);
}

Answer 1

我明白现在发生了什么。当组件中的文件数组发生更改时，我会发出它，但我不会将其保存在任何地方，而通常情况下我会用 v-model 保存它。由于我的测试不模拟 v 模型，因此计算的文件集值是一个空数组。所以我需要设置道具值来模拟，我发现我可以为输入事件添加一个侦听器来更新值。

it('can add to array', async () => {
    const files = [
      {
        name: 'image.png',
        size: 20000000,
        type: 'image/png',
      },
      {
        name: 'image.jpg',
        size: 20000,
        type: 'image/jpeg',
      },
    ]
    const wrapper = mount(Component, {
        listeners: {
           // simulate v-model update
           input: (val) => { 
               wrapper.setProps({ value: val });
           }
        }
    })

    // Upload first file
    wrapper.vm.handle({
      target: {
        files: [files[0]],
      },
    })

    expect(wrapper.emitted().input[0]).toStrictEqual([
      [files[0]]
    ]);

    await wrapper.vm.$nextTick()

    // Upload second file
    wrapper.vm.handle({
      target: {
        files: [files[1]],
      },
    })

    expect(wrapper.emitted().input[1]).toStrictEqual([files]);
}

解决此问题的另一种方法是保存到组件数据中的文件数组，然后调用更新函数发出新数组。

Vue Test Utils 多个输入发出重置值

Vue Test Utils Multiple input emits reset value

javascript

vue.js

vuejs2

vue-test-utils

组件

测试