如何解决Vue-Test-utils + CSS模块:wrapper.classes返回空数组
我刚接触Vue测试实用程序和CSS模块。我已经使用CSS模块设置了Vue组件,并且在应用程序和Storybook中一切正常。例如我的BasicButton:
<template>
<button
:class="[
$style.baseButton,$style[`baseButton--${type.toLowerCase()}`],$style[`baseButton--${size.toLowerCase()}`],]"
v-on="$listeners"
>
<slot />
</button>
</template>
<style lang="scss" module>
@import 'src/design/index.scss';
.baseButton {
...
}
</style>
在我切换到CSS模块之前,我的Jest测试运行良好。但是现在,以下测试导致错误:
it('should set a Large size',() => {
const wrapper = mount(BaseButton,{
propsData: {
size: Size.Large,},});
expect(wrapper.classes()).toContain('baseButton--large');
});
引发的错误是:
expect(received).toContain(expected) // indexOf
Expected value: "baseButton--large"
Received array: []
25 | console.log(wrapper);
26 |
> 27 | expect(wrapper.classes()).toContain('baseButton--large');
| ^
28 | });
29 |
30 | it('should set a Primary state',() => {
at Object.<anonymous> (src/components/_base-button.component.spec.ts:27:31)
我似乎找不到任何解决方案,所以也许这里的某个地方可以帮助我前进?
解决方法
试试:
expect(wrapper.classes()).find('baseButton--large')).toBe(true)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。