Vite React TypeScript Jest项目中backgroundImage测试问题求助

问题原因 #

Create React App（CRA）默认集成了Jest对静态资源的处理逻辑，而Vite的Jest环境需要手动配置资源Mock或同步Vite的资源解析规则，否则会导致样式中的图片URL被替换为默认占位符default。

解决方案 #

方案1：手动配置静态资源Mock #

适用于通过导入图片变量设置backgroundImage的场景（如import bg from './bg.jpg'）：

1. 创建资源Mock文件
   在项目根目录新建__mocks__/fileMock.ts：

   export default 'expected-bg-url'; // 替换为你预期的图片URL值
   

2. 创建样式Mock文件
   新建__mocks__/styleMock.ts用于Mock CSS导入：

   export default {};
   

3. 修改Jest配置
   更新jest.config.ts，添加资源匹配规则：

   export default {
     testEnvironment: 'jsdom',
     preset: 'ts-jest',
     moduleNameMapper: {
       // 匹配所有图片格式
       '^.+\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.ts',
       // 若使用CSS模块，需额外添加：
       // '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
       // Mock普通CSS文件
       '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.ts',
     },
     transform: {
       '^.+\\.(ts|tsx)$': 'ts-jest',
     },
   };
   

方案2：使用Vite-Jest预设同步Vite配置 #

如果你的图片路径依赖Vite的base、assetsDir等配置，可通过vite-jest让Jest复用Vite的资源解析逻辑：

1. 安装依赖

   npm install --save-dev vite-jest
   

2. 修改Jest配置
   更新jest.config.ts使用Vite预设：

   export default {
     preset: 'vite-jest',
     testEnvironment: 'jsdom',
   };
   

方案3：检查组件内路径写法 #

如果是直接写死URL（如backgroundImage: "url('/bg.jpg')"）：

• 相对路径需从组件文件位置出发，避免跨目录错误
• 根路径开头的资源需确保Vite的base配置与测试环境一致

测试示例 #

组件代码：

import bgImage from './bg.jpg';

export default function BackgroundComponent() {
  return (
    <div
      data-testid="background"
      style={{ backgroundImage: `url(${bgImage})` }}
    />
  );
}

测试代码：

import { render, screen } from '@testing-library/react';
import BackgroundComponent from './BackgroundComponent';

test('background image matches expected URL', () => {
  render(<BackgroundComponent />);
  const bgElement = screen.getByTestId('background');
  expect(bgElement.style.backgroundImage).toBe('url("expected-bg-url")');
});

内容的提问来源于stack exchange，提问作者Logesh B