Jest测试中如何通过className查找div元素并校验其样式？

元素选择注意事项 #

不要使用包含css-前缀哈希值的完整类名选中遮罩，这类类名是构建时自动生成的，会随版本、构建配置变化，优先使用MUI提供的静态稳定类名选择：

// 选中Dialog模态框的遮罩元素
const backdrop = document.querySelector('.MuiBackdrop-root.MuiDialog-backdrop');

获取opacity值的方法 #

从你贴的debug DOM结构可以看到，opacity是直接写在元素style属性上的内联样式，直接读取元素的style属性即可拿到值：

const opacityValue = backdrop.style.opacity; // 拿到的值为字符串类型的"0"

注意：测试运行的jsdom环境不会真实渲染页面、解析外部CSS，也不会执行CSS过渡动画的中间帧，仅能读取直接写在元素style属性上的内联样式值，无法通过getComputedStyle拿到非内联的样式结果。

测试逻辑修正 #

你现有测试代码存在两个容易导致取值失败的问题，对应修正方案如下：

• 移除多余的手动act包裹：@testing-library/react提供的render、fireEvent等API已经内置了act处理，额外手动包裹反而可能打断状态更新的同步流程
• 点完取消按钮后不要立刻取值，要等MUI的模态框关闭状态、过渡样式更新完成后再断言，使用waitFor即可

修正后的完整测试用例参考：

it('Test Cancel on Modal', async () => {    
  render(<MyPage />);

  const btnAdd = screen.getAllByTestId('AddNewWidget')[0];
  fireEvent.click(btnAdd);

  // 等待模态框挂载完成
  const modalWrapper = await screen.findByRole('presentation');
  const backdrop = modalWrapper.querySelector('.MuiBackdrop-root');
  expect(backdrop).toBeInTheDocument();

  const btnCancel = screen.getAllByTestId('btnCancel')[0];
  fireEvent.click(btnCancel);

  // 等待样式更新完成后校验opacity值
  await waitFor(() => {
    expect(backdrop.style.opacity).toBe('0');
  });

  jest.resetAllMocks();
});

测试稳定性优化建议 #

如果不需要专门测试动画逻辑，可以在测试环境给MUI Dialog组件传入transitionDuration={0}关闭过渡动画，或者全局mock动画组件，省去等待过渡的时间，大幅提升测试执行速度和稳定性。

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