unit-testing - 如何模拟 this.$refs.form.resetValidation()？

Question

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>

测试.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);
})

错误 - 类型错误:this.$refs.form.resetValidation 不是一个函数

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

Answer 1

您可以创建一个手动 stub 来替换原本会用于 v-form 的 stub :

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

})