Vue-test-utils + CSS 模块：wrapper.classes() 返回空数组答案

【问题标题】：Vue-test-utils + CSS modules: wrapper.classes() returns empty arrayVue-test-utils + CSS 模块：wrapper.classes() 返回空数组
【发布时间】：2020-12-29 06:16:27
【问题描述】：

我对 Vue 测试工具和 CSS 模块还很陌生。我已经使用 CSS Modules 设置了我的 Vue 组件，并且在应用程序和我的 Storybook 中一切正常。例如我的基本按钮：

<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)

我似乎找不到任何解决方案，所以也许这里的某个地方可以帮助我开始？

【问题讨论】：

我无法重现该问题。你能分享一个复制的链接吗？

标签： css vue.js jestjs vue-test-utils css-modules

【解决方案1】：

试试：

expect(wrapper.classes()).find('baseButton--large')).toBe(true)

【讨论】：