Question

我正在尝试为使用VeeValidate库的UI编写单元测试用例。 UI代码如下所示：

                <b-card-header>
                    <h4>Override Fields</h4>
                </b-card-header>
               <b-form @submit.stop.prevent="onSubmit">
                <b-row>
                  <b-col sm="12">
                       <b-form-group>
                          <label for="name">Id</label>
                          <b-form-input id="ID" name="ID" v-model="id"  type="text" 
                          v-validate="{required : true, min: 3, max:100 }"  class="mb-1" 
                          placeholder="Enter a valid Id." /> 

                          <div class="help-block alert alert-danger"  v-show="errors.has('ID')">
                              {{  errors.first('ID') }}
                          </div>
                        </b-form-group>

验证正在按预期进行。当我尝试将简单的测试用例编写为：

import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import MyComponent from '@/views/MyComponent.vue';
import VeeValidate from 'vee-validate';



describe('MyComponent.vue', () => {

  const Vue = createLocalVue();
  Vue.use(Vuex, VeeValidate);
  let actions
  let store

  beforeEach(() => {
    store = new Vuex.Store({
      actions,
      store
    })
  })


  it('sets the correct page header', () => {
    const wrapper = shallowMount(DataOverride, { sync: false, localVue: Vue, store: store });
    const pageHeader = wrapper.find('h4').text();

    expect(pageHeader).toBe('Override Fields');
  })
})

我收到以下错误消息：

[Vue warn]: Property or method "errors" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for
        class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.


    [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'has' of undefined"
    TypeError: Cannot read property 'has' of undefined

您能否让我知道我的测试用例出了什么问题？

Answer 1

这是我安排代码的方式，它工作得很好：

import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import MyComponent from '@/views/MyComponent.vue';
import VeeValidate from 'vee-validate';

const localVue = createLocalVue();
localVue.use(VeeValidate)
localVue.use(Vuex)

describe('MyComponent.vue', () => {
  let actions
  let store

  beforeEach(() => {
    store = new Vuex.Store({
      actions,
      store
    })
  })


  it('sets the correct page header', () => {
    const wrapper = shallowMount(DataOverride, {
        sync: false,
        localVue,
        store: store
    });

    const pageHeader = wrapper.find('h4').text();

    expect(pageHeader).toBe('Override Fields');
  })
})

希望对您有帮助。

使用VeeValidate时VueJS Mocha测试用例失败

1 个答案: