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

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

在 @vue/test-utils 1.x 中，shallowMount 和 mount 的第二个参数接受一个 directives 选项，该选项定义要在组件中使用的指令。在2.x中，选项是global.directives。您可以使用此选项声明 v-toggle 指令：

shallowMount(MyComponent, {
  // @vue/test-utils @1.x
  directives: {
    toggle() { /* stub */ }
  },

  // @vue/test-utils @2.x
  global: {
    directives: {
      toggle() { /* stub */ }
    }
  }
})

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

const toggle = jest.fn()

shallowMount(MyComponent, {
  // @vue/test-utils @1.x
  directives: {
    toggle
  },

  // @vue/test-utils @2.x
  global: {
    directives: {
      toggle
    }
  }
})

expect(toggle).toHaveBeenCalled()

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

How to test a custom directive from another module in a component

javascript

vue.js

vuejs2

jestjs

vue-test-utils