我有一个导入到应用程序中的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')
答案 0 :(得分:1)
shallowMount
和mount
的第二个参数接受directives
属性,该属性定义要在组件中使用的指令。您可以使用此属性来声明v-toggle
指令:
shallowMount(MyComponent, {
directives: {
toggle() { /* stub */ }
}
})
例如,确保在组件中使用指令:
const toggle = jest.fn()
shallowMount(MyComponent, {
directives: {
toggle
}
})
expect(toggle).toHaveBeenCalled()