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

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的第二个参数接受一个指令 定义要在组件中使用的指令的选项。在 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()