如何在 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();