如何用React Testing Library测试Ant Design的useMessage() Hook？

完善测试代码步骤 #

你需要在现有代码基础上补充消息触发逻辑与DOM断言逻辑，具体操作如下：

1. 确保Wrapper配置正确
   你的Wrapper组件必须包含Ant Design的ConfigProvider，否则useMessage无法获取上下文支持：

   import { ConfigProvider } from 'antd';
   
   const Wrapper = ({ children }) => (
     <ConfigProvider>{children}</ConfigProvider>
   );
   

2. 修改测试代码
   触发消息后，用React Testing Library的异步查询方法验证消息是否正常显示：

   import { renderHook, screen } from '@testing-library/react';
   import { useMessage } from 'antd';
   
   test('info message displays correctly', async () => {
     const { result } = renderHook(() => useMessage(), {
       wrapper: Wrapper
     });
     const messageApi = result.current[0];
   
     // 触发info消息，设置duration:0避免消息自动关闭影响测试
     messageApi.info({ 
       content: 'test',
       duration: 0 
     });
   
     // 等待消息渲染完成，断言文本存在于DOM中
     const messageText = await screen.findByText('test');
     expect(messageText).toBeInTheDocument();
   });
   

关键逻辑说明 #

• 调用messageApi.info()触发消息渲染
• 使用await screen.findByText('test')：AntD消息是异步插入DOM的，必须用异步查询方法等待元素出现
• 设置duration: 0：防止消息在测试完成前自动关闭，导致断言失败

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