Как проверить пользовательскую директиву из другого модуля в компоненте - PullRequest
Новая
       10

Как проверить пользовательскую директиву из другого модуля в компоненте

1 голос
/ 07 июня 2019

У меня есть библиотека пользовательского интерфейса, которую мы импортируем в наше приложение.В библиотеке пользовательского интерфейса есть пользовательская директива toggle, которую мы используем для открытия и закрытия модального окна.Когда я запускаю модульные тесты, я получаю эту ошибку: 

[Vue warn]: Failed to resolve directive: toggle

      (found in <Identity>)

В моем Identity компоненте я использую компонент из библиотеки пользовательского интерфейса 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 Ответ

1 голос
/ 07 июня 2019

Второй параметр shallowMount и mount принимает свойство directives, которое определяет директивы для использования в компоненте. Вы можете использовать это свойство для объявления директивы v-toggle: 

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

Например, чтобы убедиться, что директива используется в компоненте: 

const toggle = jest.fn()

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

expect(toggle).toHaveBeenCalled()
...