Jest 单元测试：wrapper.vm.$refs.editForm.validate 不是函数

Question

当我为表单提交编写测试用例时，我遇到了 1wrapper.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

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

的问题

我无法找出问题..请帮助我。

Answer 1

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

vue test utils 功能背后的基本原理是，当您对组件进行单元测试时，您仅测试隔离的此类组件的逻辑，而不依赖于其他模块的代码。

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

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 作为存根传递，使用一个总是 returns true 的假 validate() 方法。

然后你就可以测试你的组件代码了。例如，您可以测试您的标签是否作为 updateLabel 发出（在您的原始代码段中它是 'updateLable'，请注意）：

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

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

Jest 单元测试：wrapper.vm.$refs.editForm.validate 不是函数

Jest Unit Test: wrapper.vm.$refs.editForm.validate is not a function

vue.js

vuetify.js