如何使用 react-testing-library 对执行异步数据加载的组件进行快照测试?

How to snapshot-test a component that does async data loading using react-testing-library?

到目前为止,在我从事的项目中,我通常以这种方式对执行异步数据加载的组件进行快照测试:

describe('MyComponent component', () =>{
    test('Matches snapshot', async () => {
        fetch.mockResponse(JSON.stringify(catFacts));

        const { asFragment } = render(<MyComponent />);
        await waitFor(() => expect(asFragment()).toMatchSnapshot());
    })
})

我发现它非常方便,因为它允许拥有包含组件不同状态(加载、错误、加载数据)的快照。

问题是我刚刚发现这个方法是 not recommended at all,@testing-library/react 包的最新更新不允许我再以这种方式测试我的组件。

根据包的eslint规则,我将不得不像这样修改我的代码:

describe('MyComponent component', () =>{
    test('Matches snapshot', () => {
        fetch.mockResponse(JSON.stringify(catFacts));

        const { asFragment } = render(<MyComponent />);
        expect(asFragment()).toMatchSnapshot();
    })
})

有效,但生成的快照仅包含组件的初始状态(在本例中为“正在加载”)。

在这种情况下,您将如何有效地对异步加载数据的组件进行快照测试?

你走在正确的轨道上。剩下的唯一事情就是在你做出断言之前等待你的数据加载。

describe('MyComponent component', async () =>{
    test('Matches snapshot', () => {
        fetch.mockResponse(JSON.stringify(catFacts));
        
        const { asFragment } = render(<MyComponent />);

        await waitForElementToBeRemoved(screen.getByText('loading'));

        expect(asFragment()).toMatchSnapshot();
    })
})

我使用了 loading 文本,因为你在问题中提到了它。但您也可以等待您的数据出现在屏幕上:

await screen.findByText('something that comes from the mocked data');

注意到 waitFor 问题并解决它,干得好!