如何修复我的配置，以便 Vitest + Happy-Dom + RTL 呈现类名称

Question

我正在将测试运行程序从 jest 迁移到 vitest，并且在测试期间遇到一些与类名输出相关的问题。目前，测试期间根本不会呈现类名称。它按预期在浏览器中正确运行包，但我不确定我缺少什么才能使其正常工作。

vitest.config.ts：

import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    environment: 'happy-dom',
    setupFiles: ['./src/utils/test-utils/setup-tests.ts'],
    css: true
  }
});

按钮组.tsx：

import { ButtonProps } from './';
import PropTypes from 'prop-types';
import React from 'react';
import styles from './style.css';

// Export required for storybook story
export interface ButtonGroupProps {
  children: React.ReactElement<ButtonProps>[];
}

const ButtonGroup = ({ children }: ButtonGroupProps) => {
  console.log(styles);
  return <div className={styles['button-group']}>{children}</div>;
};

ButtonGroup.displayName = 'ButtonGroup';

ButtonGroup.propTypes = {
  children: PropTypes.arrayOf(PropTypes.node).isRequired
};

export default React.memo(ButtonGroup);

按钮组.test.tsx：

import Button from '../index';
import ButtonGroup from '../button-group';
import { expect } from 'vitest';
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';

describe('ButtonGroup Component', () => {
  beforeEach(() => {
    vi.resetAllMocks();
  });

  it('renders a button group', async () => {
    const { container } = render(
      <ButtonGroup>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
      </ButtonGroup>
    );
    await waitFor(() => {
      expect(
        screen.getByRole('button', { name: 'Button 3' })
      ).toBeInTheDocument();
    });
    expect(container.firstChild).toHaveClass('button-group');
    expect(container.firstChild?.childNodes).toHaveLength(3);
  });
});

测试失败，因为该元素的类有一个空字符串，我不确定为什么。我还尝试使用

css: { include: /.*/ }

在配置中显式包含所有 css，但这也不起作用。我确信我错过了一些简单的事情，但一直无法找到问题。

谢谢！

Answer 1

我能够通过使用别名来解析CSS来解决这个问题，使用

identity-obj-proxy

，这也是开玩笑地为此做的实际繁重的工作。

vitest.config.ts：

export default defineConfig({
  test: {
    environment: 'happy-dom',
    setupFiles: ['./src/utils/test-utils/setup-tests.ts'],
    alias: [
      {
        find: /.*\.(?:css)$/,
        replacement: 'identity-obj-proxy'
      }
    ],
    css: {
      include: /.*/
    },
    globals: true,
    deps: {
      web: {
        transformCss: true
      }
    }
  }
});