如何模拟this。$ refs.form.resetValidation()?

component1.vue

 <template>
    <div>
        <v-form
        ref="form">
            <v-text-field
                v-model="name"
                :counter="10"
                :rules="nameRules"
                label="Name"
                required
            ></v-text-field>
        </v-form>
    </div>
</template>

<script>
  export default {
    data: () => ({
      name: 'Test',nameRules: [
        v => !!v || 'Name is required',v => (v && v.length <= 10) || 'Name must be less than 10 characters',]
    }),mounted() {
        this.$refs.form.resetValidation();
    }
  }
</script>

test.spec.js

import { shallowMount,mount,createLocalVue } from '@vue/test-utils'
import Vuex from "vuex"
import Vuetify from 'vuetify'
import component1 from '@/components/component1.vue'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Vuetify)
const vuetify = new Vuetify()

test('test1',() => {
    const wrapper = shallowMount(component1,{
        localVue,vuetify
    })
    expect(3).toBe(3);
})

错误-TypeError:this。$ refs.form.resetValidation不是函数

如果我要使用mount而不是shallowMount,则测试将通过。但是我想知道如何模拟$ ref.form.resetValidation。

wen463500 回答:如何模拟this。$ refs.form.resetValidation()?

您可以创建一个手动存根来替换否则将用于v表单的存根:

test('test1',() => {
  const wrapper = shallowMount(component1,{
    localVue,stubs: {
      VForm: {
        render: () => {},methods: {
          resetValidation: () => ()
        }
      }
   }
})
....

})

本文链接:https://www.f2er.com/3117914.html

大家都在问