如何解决Vite+TS React项目中Vitest测试Styled Components报错问题？

你遇到的错误是因为测试环境中，Styled Components的组件没有接收到theme props——也就是props.theme为undefined，导致读取borderRadius时抛出类型错误。下面是几种可行的解决方法：

方法一：在单个测试用例中手动包裹ThemeProvider #

直接在测试时用Styled Components的ThemeProvider把组件包起来，传入你的主题配置：

import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import Button from './Button';
// 导入项目中定义的主题文件
import appTheme from '../../../theme';

describe('Button Component', () => {
  it('渲染正常且不报错', () => {
    render(
      <ThemeProvider theme={appTheme}>
        <Button rounded={false} />
      </ThemeProvider>
    );
    // 这里可以添加你的断言逻辑，比如查询按钮是否存在
  });
});

方法二：全局配置ThemeProvider，避免重复代码 #

如果项目中大量组件都依赖主题，建议在测试全局配置中统一注入ThemeProvider，省去每个测试手动包裹的麻烦：

1. 创建测试全局初始化文件（比如src/test/setup.ts）：

import { render } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import appTheme from '../theme';

// 封装自定义的render函数，自动包裹ThemeProvider
const customRender = (ui: React.ReactElement, options = {}) => {
  return render(
    <ThemeProvider theme={appTheme}>{ui}</ThemeProvider>,
    options
  );
};

// 导出@testing-library/react的所有方法，同时用自定义render覆盖原方法
export * from '@testing-library/react';
export { customRender as render };

2. 在Vitest配置文件（vitest.config.ts）中指定这个初始化文件：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom', // 必须指定jsdom环境，否则无法渲染React组件
    setupFiles: ['./src/test/setup.ts'], // 指向刚才创建的初始化文件
    globals: true, // 可选，启用全局测试函数（比如describe、it）
  },
});

之后在测试文件中，直接导入自定义的render方法即可，无需再手动包裹ThemeProvider：

// 注意这里导入的是自定义的render，而非@testing-library/react的原生render
import { render } from '../test/setup';
import Button from './Button';

describe('Button Component', () => {
  it('渲染正常且不报错', () => {
    render(<Button rounded={true} />);
    // 添加断言逻辑
  });
});

额外说明 #

如果之前在Jest中使用jest-styled-components，它的部分功能（比如断言样式）在Vitest中也可以兼容——只需要安装依赖后，在测试中直接使用即可，核心还是要保证组件能获取到主题配置。

内容的提问来源于stack exchange，提问作者Ali Mardini