vue.js - 开玩笑单元测试 : wrapper. vm.$refs.editForm.validate 不是函数

Question

当我为表单提交编写测试用例时，我遇到了 1 wrapper.vm.$refs.editForm.validate is not a function 的问题

我无法弄清楚问题..请帮助我。
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-plugin-pwa": "^3.11.0",
"@vue/cli-plugin-unit-jest": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"@vue/eslint-config-prettier": "^5.0.0",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0"

==== EditProperty.vue======

<v-form ref="editForm" lazy-validation>
    <v-flex>
      <v-text-field label="Label Text" v-model="labelName" :rules="[v => !!v || 'Label Text is required']"

      />
    </v-flex>
</v-form>
<script>
export default {
  data() {
    return {
      labelName: ''
    }
  },
  methods: {
    save() {
      if (this.$refs.editForm.validate()) {
        this.$emit('updateLable', this.labelName)
      }
    }
  }
}
</script>

======EditProperty.spec.js =====

import { shallowMount, createLocalVue } from '@vue/test-utils'
import EditProperty from '@/components/EditProperty.vue'
import Vuetify from 'vuetify'
const localVue = createLocalVue()
localVue.use(Vuetify)
let wrapper
describe('EditProperty.vue', () => {
  beforeEach(() => {
    wrapper = shallowMount(EditProperty, {
      localVue,
      data() {
        return {
          labelName: 'Username'
        }
      }
    })
  })

  it('should save called correctly', () => {
    wrapper.vm.save()
  })
})

预期 => 测试应该通过

得到 => wrapper.vm.$refs.editForm.validate is not a function
当我为表单提交编写测试用例时，我遇到了 1 wrapper.vm.$refs.editForm.validate is not a function 的问题

我无法弄清楚问题..请帮助我。

Answer 1

shallowMount不渲染子组件。 IE。在你的情况下，v-form不会在测试中呈现。事实上，如果您调用 html从您的包装器中，您将看到一个 HTML 注释代替了 <edit-form> .

vue test utils 特性背后的基本原理是，当你对一个组件进行单元测试时，你只单独测试这个组件的逻辑，而不依赖于其他模块的代码。

现在您可以手动将对象传递为 stub并提供任何测试替身以允许 validate()调用 stubs选项:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import EditProperty from '@/components/EditProperty.vue'
import Vuetify from 'vuetify'
const localVue = createLocalVue()
localVue.use(Vuetify)
let wrapper
describe('EditProperty.vue', () => {
  beforeEach(() => {
    const EditFormStub = {
      render: () => {},
      methods: {
        validate: () => true,
      }
    };
    wrapper = shallowMount(EditProperty, {
      localVue,
      stubs: {
        'edit-form': EditFormStub,
      }
      data() {
        return {
          labelName: 'Username'
        }
      }
    })
  })

  it('should save called correctly', () => {
    wrapper.vm.save()
  })
})

所以我们传递了一个假的 editForm作为 stub ，带有假 validate()始终返回 true 的方法。

然后你可以测试你的组件代码。例如，您可以测试您的标签是否以 updateLabel 的形式发出。 (在您的原始片段中它是“updateLable”，请小心):

    it('should save called correctly', () => {
      wrapper.vm.save();

      expect(wrapper.emitted('updateLabel')[0][0]).toBe(whatever the label should be)
    })