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)