如何用Testing Library测试基于opacity控制的元素可见性变化？

我需要对以下组件代码做单元测试：

<div className={classnames('loader-text', { 'loader-text-show': showText })} data-testid="loader-text" >
        LOADING...
</div>

对应的CSS：

.loader {
  &-text {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
  }
  &-text-show {
    opacity: 1;
  }
}

逻辑是：通过loader-text-show类控制文本可见性，该类会在5秒后添加，因此“LOADING...”文本初始存在但opacity:0。我想先验证文本隐藏，5秒后验证文本可见。

之前我通过检查loader-text-show类的存在来测试，但Testing Library现在不推荐这种方式。尝试用not.toBeVisible()断言时失败了——因为div本身在DOM中是“可见”状态（opacity:0不会被Testing Library判定为不可见），不符合我的预期。当前测试代码如下：

jest.useFakeTimers();
const { container, getByText } = render(<Loader large />);
expect(screen.queryByText("LOADING...")).not.toBeVisible();
act(() => {
     jest.advanceTimersByTime(5000);
});
expect(screen.queryByText('LOADING...')).toBeVisible();

Testing Library的toBeVisible()断言不会将opacity:0视为“不可见”，因为元素仍在DOM中占据空间、可交互。要测试基于opacity的可见性，需要直接检查元素的计算样式：

修正后的测试代码 #

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

test('LOADING文本初始隐藏，5秒后可见', () => {
  jest.useFakeTimers();
  render(<Loader large />);
  
  const loadingText = screen.getByText('LOADING...');
  
  // 初始状态：检查opacity为0
  expect(getComputedStyle(loadingText).opacity).toBe('0');
  
  // 推进5秒时间
  act(() => {
    jest.advanceTimersByTime(5000);
  });
  
  // 更新后状态：检查opacity为1
  expect(getComputedStyle(loadingText).opacity).toBe('1');
  
  jest.useRealTimers();
});

补充说明 #

• getComputedStyle会返回元素最终应用的样式值，对应CSS中定义的opacity属性
• 如果你的组件使用了CSS-in-JS或者内联样式，也可以直接读取元素的style.opacity，但对于类控制的样式，getComputedStyle更可靠
• 若要更简洁，也可以结合@testing-library/jest-dom提供的toHaveStyle匹配器：

// 初始状态
expect(loadingText).toHaveStyle('opacity: 0');
// 5秒后
expect(loadingText).toHaveStyle('opacity: 1');

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