如何在Vitest+JSDom环境下测试Svelte组件的CSS样式？

针对你提供的HelloWorld.svelte组件，以下是验证h1元素颜色和背景色的单元测试方案，无需依赖Quixote，直接用现有工具链实现：

完整测试代码 #

创建HelloWorld.test.js文件，内容如下：

import { render, screen } from '@testing-library/svelte';
import HelloWorld from './HelloWorld.svelte';

// 辅助函数：将RGB格式字符串转换为十六进制格式
function rgbToHex(rgbString) {
  const [r, g, b] = rgbString.match(/\d+/g).map(Number);
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toLowerCase()}`;
}

test('h1元素的颜色和背景色符合预期', () => {
  // 渲染组件
  render(HelloWorld);
  
  // 获取页面中的h1元素
  const heading = screen.getByRole('heading', { level: 1 });
  
  // 获取元素最终计算后的样式
  const computedStyle = window.getComputedStyle(heading);
  
  // 方式1：直接匹配JSDom返回的RGB格式值
  expect(computedStyle.color).toBe('rgb(255, 255, 255)');
  expect(computedStyle.backgroundColor).toBe('rgb(0, 181, 226)');
  
  // 方式2：转换为十六进制后匹配（更贴近组件中写的格式）
  expect(rgbToHex(computedStyle.color)).toBe('#ffffff');
  expect(rgbToHex(computedStyle.backgroundColor)).toBe('#00b5e2');
});

关键说明 #

1. 样式获取方式：
   不能直接读取元素的style属性（该属性仅对应元素的内联style属性），必须用window.getComputedStyle()获取最终应用到元素的样式，这包含了组件