如何在react-test-renderer中查询文本元素并等待组件完全渲染？

问题场景 #

我在用react-test-renderer做组件快照测试，期望组件完全渲染后和已保存的快照对比，当前代码如下：

import renderer from 'react-test-renderer';
    
const tree = renderer.create(<PolicySummary />);
expect(tree.toJSON()).toMatchSnapshot();

但现在的问题是快照对比触发得太早，组件还没完全渲染就执行了，导致不管组件数据是什么，测试都能通过。手动加await new Promise((r,_) => setTimeout(() => r(true), 3000));后能正常工作，组件会在完全渲染后再做快照对比。

我想知道怎么在react-test-renderer里查询特定文本，等这个文本出现在渲染结果里后再执行快照对比？之前在jest-dom里我是这么写的：

await waitForExpect(() => expect(screen.queryByText(TestUtils.TEST_NAME)).toBeInTheDocument());

这种方式在jest-dom里可行，react-test-renderer有没有类似的实现方式？

解决方案 #

1. 手动实现等待+文本查询逻辑 #

react-test-renderer本身没有内置waitFor这类API，但可以自己封装一个等待函数，结合渲染树的文本检查来判断组件是否渲染完成。

首先实现一个递归检查渲染树中是否包含目标文本的函数：

function hasTextInTree(tree, targetText) {
  // 处理纯文本节点
  if (typeof tree === 'string') {
    return tree.includes(targetText);
  }
  // 处理子节点数组
  if (Array.isArray(tree)) {
    return tree.some(node => hasTextInTree(node, targetText));
  }
  // 处理包含children的元素节点
  if (tree?.children) {
    return hasTextInTree(tree.children, targetText);
  }
  return false;
}

接着封装等待函数，循环检查直到文本出现或超时：

async function waitForTextInRenderer(rendererTree, targetText, timeout = 5000, interval = 100) {
  const startTime = Date.now();
  return new Promise((resolve, reject) => {
    const checkRender = () => {
      const currentTree = rendererTree.toJSON();
      if (hasTextInTree(currentTree, targetText)) {
        resolve(currentTree);
      } else if (Date.now() - startTime > timeout) {
        reject(new Error(`超时：未找到目标文本 "${targetText}"`));
      } else {
        setTimeout(checkRender, interval);
      }
    };
    checkRender();
  });
}

最后在测试中使用，等目标文本出现后再生成快照：

import renderer from 'react-test-renderer';

test('PolicySummary 渲染完成后生成快照', async () => {
  const tree = renderer.create(<PolicySummary />);
  // 等待目标文本出现，确认组件渲染完成
  await waitForTextInRenderer(tree, TestUtils.TEST_NAME);
  // 执行快照对比
  expect(tree.toJSON()).toMatchSnapshot();
});

2. 结合React的act处理异步状态更新 #

如果组件的异步渲染是由React状态更新（比如接口请求完成后setState）触发的，可以搭配React的act函数，确保所有状态更新都被处理完成：

import { act } from 'react-test-renderer';
import renderer from 'react-test-renderer';

test('PolicySummary 异步渲染完成后生成快照', async () => {
  let tree;
  await act(async () => {
    tree = renderer.create(<PolicySummary />);
    // 结合等待函数确认渲染完成
    await waitForTextInRenderer(tree, TestUtils.TEST_NAME);
  });
  expect(tree.toJSON()).toMatchSnapshot();
});

注意事项 #

• 优先使用文本查询的等待方式，避免固定时长的setTimeout——不同环境下渲染/接口请求耗时不稳定，文本查询更可靠。
• 如果组件依赖外部接口，建议在测试中mock接口返回，既可以稳定测试结果，也能更快触发组件的完成状态。

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