Jest 快照测试等到组件渲染

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