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

zengzsys 于 2023-02-24 发布在 Vue.js

关注(0)|答案(2)|浏览(172)

我对Vue测试工具和CSS模块还很陌生。我已经使用CSS模块设置了我的Vue组件，在应用程序和我的故事书中一切都很好。例如我的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)

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

vue.js

来源：https://stackoverflow.com/questions/63834937/vue-test-utils-css-modules-wrapper-classes-returns-empty-array

2条答案

按热度按时间

v64noz0r1#

试试看：

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

赞(0）回复(0）举报 2023-02-24

83qze16e2#

我认为您可以通过使用wrapper.vm.$style来解决这个问题，这样您就可以获得生成的CSS类并将其用于您的测试。
在我的测试中，我使用的是这样的东西：

import { mount } from '@vue/test-utils'

import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('renders a title and a body', () => {
    const title = 'Lorem ipsum'
    const body = 'Lorem ipsum dolor sit amet.'
    const wrapper = mount(MyComponent, {
      propsData: {
        title,
        body
      }
    })
    const style = wrapper.vm.$style
    const titleElement = wrapper.find('.' + style['my-component-title'])
    const bodyElement = wrapper.find('.' + style['my-component-body'])

    expect(titleElement.exists()).toBe(true)
    expect(titleElement.text()).toBe(title)
    expect(bodyElement.exists()).toBe(true)
    expect(bodyElement.text()).toBe(body)
  })
})

赞(0）回复(0）举报 2023-02-24

我来回答

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

2条答案

相关问题

热门标签

最新问答