时间戳

首页 > 解决方案 > Vue-test-utils + CSS 模块：wrapper.classes() 返回空数组

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

问题描述

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

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

标签： cssvue.jsjestjsvue-test-utilscss-modules

解决方案

尝试：

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

推荐阅读