React Testing Library样式测试问题：测试用例未按预期失败排查

核心问题分析 #

你遇到的问题源于两个关键错误：

1. 测试对象错误 #

你通过screen.getByText(/step 1/i)获取的是<span>元素，但组件的背景色是设置在**父级<div>**上的。这意味着你的断言根本没有作用在正确的元素上，无论组件逻辑如何，测试都会通过。

2. 第二个测试用例的断言逻辑错误 #

当pageIndex=1时，组件的实际样式表现是：

• Step1的div背景色为red
• Step2的div背景色为green
  但你的第二个测试用例里，断言内容和第一个用例完全一致，这导致即使组件逻辑正确，测试也会错误地通过。

另外，toHaveStyle的写法也有问题：样式值不需要加引号，实际DOM中样式属性值是不带引号的，正确写法应为backgroundColor: green而非backgroundColor: "green"。

修复后的测试代码 #

方案一：通过父元素获取目标div（无需修改组件） #

test("Page Index is 0", () => {
  render(<FormSteps pageIndex={0} />);

  // 获取带背景色的父级div元素
  const step1Div = screen.getByText(/step 1/i).parentElement;
  const step2Div = screen.getByText(/step 2/i).parentElement;

  expect(step1Div).toHaveStyle('backgroundColor: green');
  expect(step2Div).toHaveStyle('backgroundColor: red');
});

test("Page Index is 1", () => {
  render(<FormSteps pageIndex={1} />);

  const step1Div = screen.getByText(/step 1/i).parentElement;
  const step2Div = screen.getByText(/step 2/i).parentElement;

  // 修正断言逻辑，匹配pageIndex=1时的样式
  expect(step1Div).toHaveStyle('backgroundColor: red');
  expect(step2Div).toHaveStyle('backgroundColor: green');
});

方案二：给组件添加测试标识（更稳定可靠） #

先给组件的div添加data-testid属性：

export function FormSteps(props: FormStepsProps) {
  return (
    <div>
      <div
        data-testid="step-1-container"
        style={{
          backgroundColor: props.pageIndex === 0 ? "green" : "red",
        }}
      >
        <span>Step 1</span>
      </div>
      <div
        data-testid="step-2-container"
        style={{
          backgroundColor: props.pageIndex === 1 ? "red" : "green",
        }}
      >
        <span>Step 2</span>
      </div>
    </div>
  );
}

再编写测试代码：

test("Page Index is 0", () => {
  render(<FormSteps pageIndex={0} />);

  const step1Div = screen.getByTestId('step-1-container');
  const step2Div = screen.getByTestId('step-2-container');

  expect(step1Div).toHaveStyle('backgroundColor: green');
  expect(step2Div).toHaveStyle('backgroundColor: red');
});

test("Page Index is 1", () => {
  render(<FormSteps pageIndex={1} />);

  const step1Div = screen.getByTestId('step-1-container');
  const step2Div = screen.getByTestId('step-2-container');

  expect(step1Div).toHaveStyle('backgroundColor: red');
  expect(step2Div).toHaveStyle('backgroundColor: green');
});

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