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

s5a0g9ez 于 2022-12-14 发布在 Vue.js

关注(0)|答案(2)|浏览(347)

当我为表单提交编写测试用例时，我遇到了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"
====编辑属性.版本======

<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问题
我无法解决这个问题..请帮助我。

vue.js

来源：https://stackoverflow.com/questions/58236034/jest-unit-test-wrapper-vm-refs-editform-validate-is-not-a-function

2条答案

按热度按时间

3pmvbmvn1#

shallowMount不会呈现子组件。也就是说，在您的情况下，v-form不会在测试中呈现。事实上，如果您从 Package 器调用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作为存根传递，伪validate()方法始终返回true。
然后你可以测试你的组件代码。例如，你可以测试你的标签是以updateLabel的形式发出的（在你的原始代码片段中它是'updateLabel'，要小心）：

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

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

赞(0）回复(0）举报 2022-12-14

0aydgbwb2#

如果你不需要存根的话。你可以很容易地这样做：

import { nextTick } from 'vue'

it('test', async () => {
    wrapper.vm.$refs.editForm.validate = jest.fn()
    await nextTick()
})

赞(0）回复(0）举报 2022-12-14

我来回答

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

2条答案

相关问题

热门标签

最新问答