Recently I started using Vue Test Utils along with CSS Modules. My Vue component is all set up with CSS Modules and it functions perfectly in the app as well as in Storybook. Take my BasicButton for example:
<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>
Prior to switching to CSS Modules, my Jest tests were running smoothly. However, after the switch, a particular test is throwing an error:
it('should set a Large size', () => {
const wrapper = mount(BaseButton, {
propsData: {
size: Size.Large,
},
});
expect(wrapper.classes()).toContain('baseButton--large');
});
The error message reads:
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)
I've tried looking for a solution but haven't had any luck. Any help or advice on how to move forward would be greatly appreciated.