如何使用React Testing Library测试样式文件？

前置准备 #

先安装专门适配styled-components的测试依赖：

npm install --save-dev jest-styled-components
# 或用yarn
yarn add --dev jest-styled-components

测试单个组件的基础样式 #

以你提供的Salutation组件为例，测试步骤如下：

1. 导入测试工具与目标组件：

import { render, screen } from '@testing-library/react';
import { Salutation } from './你的样式文件路径';
import 'jest-styled-components';

2. 编写测试用例：

test('Salutation 组件应用正确基础样式', () => {
  render(<Salutation>Hello World</Salutation>);
  const salutationElement = screen.getByText('Hello World').parentElement;
  
  // 断言背景色
  expect(salutationElement).toHaveStyleRule('background', '#f0f0f0');
  // 断言字体大小
  expect(salutationElement).toHaveStyleRule('font-size', '14px');
  // 断言内边距
  expect(salutationElement).toHaveStyleRule('padding', '16px');
});

测试嵌套样式（如Salutation内的a标签） #

针对组件内的嵌套选择器，通过toHaveStyleRule的第二个参数指定目标元素：

test('Salutation 内的链接应用正确样式', () => {
  render(<Salutation>Hello <a href="/">Link</a></Salutation>);
  const salutationElement = screen.getByText('Hello').parentElement;
  
  // 断言链接颜色与下划线
  expect(salutationElement).toHaveStyleRule('color', 'blue', {
    modifier: 'a'
  });
  expect(salutationElement).toHaveStyleRule('text-decoration', 'underline', {
    modifier: 'a'
  });
});

测试相对单位样式（如vw单位的Header/Label） #

直接断言样式规则的原始值即可：

test('Header 组件应用正确字体大小与加粗样式', () => {
  render(<Header>Test Header</Header>);
  const headerElement = screen.getByText('Test Header');
  
  expect(headerElement).toHaveStyleRule('font-size', '1.15vw');
  expect(headerElement).toHaveStyleRule('font-weight', 'bold');
});

test('Label 组件应用正确对齐方式与字体大小', () => {
  render(<Label>Test Label</Label>);
  const labelElement = screen.getByText('Test Label');
  
  expect(labelElement).toHaveStyleRule('text-align', 'left');
  expect(labelElement).toHaveStyleRule('font-size', '0.9375vw');
});

无第三方库的原生测试方案（可选） #

如果不想额外安装依赖，可通过window.getComputedStyle获取计算后的样式：

test('Container 组件内边距与对齐方式正确', () => {
  render(<Container>Test</Container>);
  const containerElement = screen.getByText('Test');
  const computedStyle = window.getComputedStyle(containerElement);
  
  expect(computedStyle.padding).toBe('16px');
  expect(computedStyle.textAlign).toBe('center');
});

注意事项 #

• 优先测试用户可见的关键样式，比如背景色、字体大小、对齐方式，避免纠结无关细节。
• 遵循React Testing Library的理念，通过用户能感知的内容（如文本）定位元素，不要直接查询styled-components生成的动态类名。
• 测试响应式样式时，可模拟不同视口宽度后再断言计算样式。

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