开玩笑的快照测试等待直到组件渲染

Question

我觉得在测试与异步提取操作的React组件时缺少一些东西。

我有这样的以下组件...

export default function Page() {
    const [result, setResult] = useState();

    async function initialize() {
       const response = api.fetchData();
       setResult(response);
    }

    useEffect(() => {
        initialize();
    }, []);

    return (isLoading ? (
        <div>Fetching Data...</div>
    ) : (
        <div className="page-result-name">{result.name}</div>
    )
}

我想创建以下测试。

test('Page rendering test.', async () => {
    jest.spyOn(api, 'fetchData').mockResolvedValue({ name: 'User 1'});

    const pageRendering = renderer.create(<Page />);

    // Wait?  How to wait?
    // I have tried the following... as well as other method.
    // await waitFor(() => {
    //     const element = document.getElementByClassName('page-result-name')[0] as 
    //     HTMLElement;
    //     expect(element.innerHTML.includes('User 1')).toBeTruthy();
    // });

    expect(pageRendering.toJSON()).toMatchSnapshot();
});

我遇到的问题是，在拍摄快照时尚未返回数据。

无论方法如何，我都遇到了以下警告问题

Warning: It looks like you're using the wrong act() around your test interactions

，或者它总是显示获取数据...

我使用 @testing-library/react的渲染以及waitfor和一切正常。我不知道如何为此生成快照。

这里的任何帮助将不胜感激！！

干杯！！

Answer 1

对于异步操作，棘手的是等待从屏幕上删除加载组件，这样您就可以确保组件已完成，然后您可以期望快照：

test('Page rendering test.', async () => {
    jest.spyOn(api, 'fetchData').mockResolvedValue({ name: 'User 1'});

    const pageRendering = renderer.create(<Page />);

    // Wait?  How to wait?
    //  wait for your data to be loaded before you make your assertion.
    await waitForElementToBeRemoved(screen.getByText('Fetching Data...'));

    expect(pageRendering.toJSON()).toMatchSnapshot();
});