css - Vue-test-utils + CSS 模块 : wrapper. classes() 返回空数组

Question

我对 Vue Test Utils 和 CSS Modules 还很陌生。我已经使用 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 Modules 之前，我的 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)

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

Answer 1

尝试:

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