0

我正在尝试为使用 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

你能告诉我我的测试用例有什么问题吗？

4

1 回答 1

0

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

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');
  })
})

我希望这可以帮助你。

于 2019-09-26T20:23:43.040 回答