如何在vue-test-utils中为子vue组件设置数据？

Question

我有一个 FileForm.vue 组件：-

<template>
  <div class="file-form">
    <form @submit="submit">
      <input v-model="name" type="text" placeholder="File Name" />
      <button type="submit">
        <i class="fas fa-plus"></i>
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: ''
    }
  },
  methods: {
    submit () {
      if (!this.name.trim()) {
        return
      }
      this.$emit('submit', this.name)
    }
  }
}
</script>

它包含在App.vue组件中：-

<template>
  <div class="main">
      <div class="sidebar">
        <file-form @submit="createFile"></file-form>
        <div class="files-list">

        </div>
      </div>
      <div class="content">
        <editor v-model="content"></editor>
        <renderer :markdown="content"></renderer>
      </div>
  </div>
</template>

现在我正在测试这个行为：-

test('on successfull submit of the FileForm.vue a file object should be pushed to files array of App.vue', () => {
    let appWrapper = mount(App)
    appWrapper.setMethods({
      createFile: jest.fn()
    })
    appWrapper.find('form').trigger('submit')
    expect(appWrapper.vm.createFile).toHaveBeenCalled()
})

它会失败，因为最初 FileForm.vue 的输入是空的，所以它的数据名称属性，它不会因为 if 块而触发提交操作。因此模拟的 createFile 没有被调用。

如果我能以某种方式设置数据，在这种情况下，在触发提交之前设置 FileForm.vue 的名称属性，我的测试就会通过。像这样：-

let formWrapper = appWrapper.find('file-form')
formWrapper.setData({
  name: 'New File'
})

但我不能这样做，因为 formWrapper 是一个 HTMLElement 而不是 Vue 实例。

Answer 1

使用

import FileForm from '@/components/FileForm'

let formWrapper = appWrapper.find(FileForm)

formWrapper.setData({
  // your code here
})

如何在vue-test-utils中为子vue组件设置数据？

How to set data for the child vue component in vue-test-utils?

vue.js

vuejs2

vue-test-utils