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的name属性，我的测试将通过。这样的事情： -

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组件的数据？

1 个答案: