Question

我有一个导入到应用程序中的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')

Answer 1

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

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

例如，确保在组件中使用指令：

const toggle = jest.fn()

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

expect(toggle).toHaveBeenCalled()

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

1 个答案: