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

Question

I am trying to do the snapshot testing of my component. the expectation is the component is rendered properly and then it's. compared against the previously saved snapshots.

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

But the problem here is the snapshot is compared too early before the component has a chance to render fully. which is resulting the test case always passing no matter what data the component has.

if I add the wait await new Promise((r,_) => setTimeout(() => r(true), 3000)); then it works properly, and the component Is rendered fully before it compared to the snapshot.

so, how to query the renderer for some text, and wait until the text is available in the render before comparing it to the snapshot?

for the jest dom, render I use

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

this works for the jest-dom render. but is there any way to achieve this in react-test-renderer?

Answer 1

You can wait for the component to render using something like this:

await new Promise(process.nextTick)

Then you can use one of the findBy* method in react-test-renderer , eg:

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})
}

Then your code could look like this:

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

await new Promise(process.nextTick);

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

expect(tree).toMatchSnapshot();