如何在 react-test-renderer 渲染器实例中查找文本元素？

Question

我正在尝试对我的组件进行快照测试。 期望是组件被正确渲染然后它是。 与之前保存的快照相比。

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

但这里的问题是在组件有机会完全渲染之前比较快照太早了。 这导致无论组件有什么数据，测试用例总是通过。

如果我添加等待await new Promise((r,_) => setTimeout(() => r(true), 3000)); 然后它可以正常工作，并且与快照相比，组件在它之前完全呈现。

那么，如何向渲染器查询一些文本，并等到文本在渲染器中可用，然后再将其与快照进行比较？

对于开玩笑的 dom，渲染我使用

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

这适用于 jest-dom 渲染。 但是有什么办法可以在 react-test-renderer 中实现这一点吗？

Answer 1

您可以使用如下方式等待组件呈现：

await new Promise(process.nextTick)

然后你可以使用react-test-renderer中的findBy*方法之一，例如：

const queryText = (component: renderer.ReactTestRenderer, text: string) => {
    return component.root.findAll(node => 
            node.children.length === 1 &&
            typeof(node.children[0]) === 'string' &&
            node.children[0] === text,
        {deep: true})
}

那么您的代码可能如下所示：

const tree = renderer.create(<PolicySummary />);

await new Promise(process.nextTick);

expect(queryText(component, TestUtils.TestName)).toHaveLength(1);

expect(tree).toMatchSnapshot();