React Testing Library重新渲染后如何正确查找元素？

我来帮你梳理下这个问题的核心原因，以及对应的解决方案：

问题分析 #

你遇到的情况大概率有两个可能的原因：

• rerender时传入的props没有更新：如果你的Table组件是受控组件，依赖props来控制选中值，那rerender时必须传入包含lastValue的更新后props，否则组件不会渲染新的选中值。
• 直接使用container查询的局限性：虽然container指向的是同一个DOM容器，但React Testing Library更推荐使用screen对象来查询元素——它会自动关联最新的DOM内容，避免手动操作容器可能带来的偏差。

另外还要确认组件状态更新是否同步：如果点击选项后组件内部有异步操作（比如API请求、setTimeout），直接查询可能会拿到旧值，需要等待异步完成。

修正后的代码示例 #

import { render, fireEvent, screen, waitFor } from '@testing-library/react';

// 1. 准备更新后的props，确保包含目标选中值lastValue
const updatedProps = { ...props, selectedValue: lastValue };

// 2. 初始渲染组件，改用screen查询替代container
const { rerender } = render(<Table {...props} />);

// 3. 模拟用户点击选择框和选项的操作
const select = screen.getByTestId('select');
fireEvent.click(select);
const selectOption = screen.getByTestId('select-option');
fireEvent.click(selectOption);

// 4. 用更新后的props重新渲染组件
rerender(<Table {...updatedProps} />);

// 5. 使用screen查询最新的选中值元素
// 如果是同步状态更新，直接断言
expect(screen.getByTestId('selected-value').textContent).toBe(lastValue);

// 如果组件有异步更新逻辑（比如请求数据），用waitFor等待DOM更新
// await waitFor(() => {
//   expect(screen.getByTestId('selected-value').textContent).toBe(lastValue);
// });

关键要点说明 #

• 优先使用screen查询：screen是React Testing Library的推荐查询方式，它基于当前文档的DOM进行查询，rerender后会自动获取最新的元素，不用关心容器实例的问题。
• 确保rerender的props正确：如果你的Table组件是受控组件，必须通过props传递更新后的选中值，否则组件会保持原有状态，rerender也不会改变显示内容。
• 处理异步更新：如果组件内部有异步状态更新（比如点击选项后触发API请求再更新状态），一定要用waitFor或者findBy*系列查询方法来等待DOM更新完成后再断言。

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