컴포넌트의 다른 모듈에서 커스텀 디렉티브를 테스트하는 방법

컴포넌트의 다른 모듈에서 커스텀 디렉티브를 테스트하는 방법

앱에 Import하는 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? Import 후 다음 항목이 있습니다.

const localVue = createLocalVue()

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

인@vue/test-utils1.x, 의 두 번째 파라미터shallowMount그리고.mount를 받아들이다directives컴포넌트에서 사용할 지시어를 정의하는 옵션입니다.2.x의 옵션은 입니다.이 옵션을 사용하면,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()

언급URL : https://stackoverflow.com/questions/56499954/how-to-test-a-custom-directive-from-another-module-in-a-component