Jest 单元测试：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不呈现子组件。在您的情况下，IEv-form不会在测试中呈现。事实上，如果你html从你的包装器中调用，你会看到一个 HTML 注释代替<edit-form>.

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

现在你可以手动传递一个对象 asstub并提供任何测试替身来允许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作为存根传递，并使用validate()始终返回真的假方法。

然后您可以测试您的组件代码。例如，您可以测试您的标签是否发出updateLabel（在您的原始代码段中，它是“updateLable”，要小心）：

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

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