React Testing Library无法检测Redactor编辑器模态框CSS类更新

问题根源 #

Redactor作为第三方富文本编辑器，其模态框的渲染、类名添加都是异步操作。你的测试代码存在几个关键问题：

• 未等待点击事件的异步处理完成就查询元素
• 依赖parentNode这种脆弱的DOM层级定位元素，容易受编辑器DOM结构变化影响
• 仅用queryByText定位模态框不够精准，可能匹配到非目标元素
• 没有明确断言模态框的open类存在，仅通过debug查看状态

修复方案及代码示例 #

调整测试逻辑，确保等待异步操作完成，用更可靠的方式定位元素：

it('should open and close image modal correctly', async () => {
  render(<Editor id='test-modal' initValue={props.initValue} />);
  jest.setTimeout(30000);

  // 定位并点击图片按钮，await确保点击事件处理完成
  const imageButton = screen.getByLabelText('Image');
  await userEvent.click(imageButton.firstChild);

  // 等待模态框渲染完成并带有open类
  const imageModal = await waitFor(() => {
    // 用role: dialog定位模态框，配合name匹配更精准
    const modal = screen.getByRole('dialog', { name: /image/i });
    expect(modal).toHaveClass('open');
    return modal;
  }, { timeout: 4000 });

  // 定位关闭按钮（Redactor默认关闭按钮带redactor-modal-close类）
  const closeButton = imageModal.querySelector('.redactor-modal-close');
  await userEvent.click(closeButton);

  // 等待模态框的open类被移除
  await waitFor(() => {
    expect(imageModal).not.toHaveClass('open');
  }, { timeout: 4000 });
});

关键注意事项 #

1. 优先使用语义化查询：React Testing Library推荐用getByRole、getByLabelText等语义化方法定位元素，比querySelector或getByClassName更稳定。如果Redactor模态框的role不是dialog，可以查看实际DOM结构调整参数。
2. await所有用户操作：userEvent.click是异步方法，必须用await确保编辑器的事件处理流程完成后再进行下一步断言。
3. 避免依赖DOM层级：不要用parentNode.parentNode这种方式定位元素，Redactor版本更新可能会改变DOM结构，导致测试失败。
4. 明确断言状态变化：用waitFor包裹断言，确保等待到目标状态（模态框出现/消失、类名添加/移除）再进行判断。

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