如何在单元测试中验证React按钮的Focus轮廓样式

要测试React组件中Styled Button在:focus状态下的outline样式，核心问题是Jest的jsdom环境不会真实渲染CSS，导致getComputedStyle无法获取伪类（:focus）的样式。这里推荐使用jest-styled-components库来直接解析Styled Components的样式规则，无需依赖真实DOM渲染。

步骤1：安装依赖 #

npm install --save-dev jest-styled-components

步骤2：编写测试用例 #

假设你的Styled Button组件定义如下：

// StyledButton.jsx
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #007bff;
  color: white;

  &:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
  }
`;

export default StyledButton;

对应的测试代码：

// StyledButton.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import StyledButton from './StyledButton';
import 'jest-styled-components'; // 导入jest-styled-components扩展

test('按钮获取焦点时显示指定样式的outline', () => {
  // 渲染组件
  render(<StyledButton>提交</StyledButton>);
  const button = screen.getByText('提交');

  // 触发focus事件
  fireEvent.focus(button);

  // 断言:focus状态下的outline样式
  expect(button).toHaveStyleRule('outline', '2px solid #0056b3', {
    modifier: ':focus'
  });
  // 可选：断言outline-offset
  expect(button).toHaveStyleRule('outline-offset', '2px', {
    modifier: ':focus'
  });
});

原理说明 #

jest-styled-components扩展了Jest的断言方法，能够直接读取Styled Components生成的样式规则，包括伪类、媒体查询等特殊规则，无需依赖jsdom的CSS渲染能力。相比getComputedStyle，这种方式更可靠，因为它直接验证你编写的样式代码，而不是DOM渲染后的结果。

替代方案（不依赖第三方库） #

如果不想额外安装库，可以直接访问Styled组件的styledComponentStyle属性来解析样式规则，但这种方法更繁琐：

test('按钮获取焦点时存在outline样式', () => {
  const focusRule = StyledButton.styledComponentStyle.rules.find(
    rule => rule.selector === '&:focus'
  );
  expect(focusRule).toBeDefined();
  expect(focusRule.declarations).toContainEqual({
    property: 'outline',
    value: '2px solid #0056b3'
  });
});

这种方法不需要触发focus事件，直接验证样式规则是否存在，但无法结合组件实例的状态，适合单纯验证样式定义的场景。

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