如何测试组件中另一个模块的自定义指令

时间:2019-06-07 19:03:17

标签: javascript vue.js vuejs2 jestjs vue-test-utils

我有一个导入到应用程序中的UI库。 UI库中有一个自定义指令toggle,用于打开和关闭模式。运行单元测试时,出现此错误:

[Vue warn]: Failed to resolve directive: toggle

      (found in <Identity>)

在我的Identity组件中,我使用的是来自UI库checkbox的组件,其中包含以下指令:

<checkbox
      :value="rememberMe"
      :label="$t('identity.rememberMeHeading')"
      name="rememberMe"
      data-test="remember-me"
      @input="toggleRememberMe()">
  <span slot="subtext"> {{ $t('identity.rememberMeSubheading') }}
    <a v-toggle:a-modal="'learn-more-modal'"
       @click.prevent="() => {}">{{ $t('identity.learnMore') }}</a>
  </span>
</checkbox>

如何在Identity.spec.js中解决此错误?导入后,我有:

const localVue = createLocalVue()

localVue.use(Vuex)
localVue.use('toggle') 

1 个答案:

答案 0 :(得分:1)

shallowMountmount的第二个参数接受directives属性,该属性定义要在组件中使用的指令。您可以使用此属性来声明v-toggle指令:

shallowMount(MyComponent, {
  directives: {
    toggle() { /* stub */ }
  }
})

例如,确保在组件中使用指令:

const toggle = jest.fn()

shallowMount(MyComponent, {
  directives: {
    toggle
  }
})

expect(toggle).toHaveBeenCalled()