我正在尝试使用RTK Query进行开发,但找不到一个好的示例来展示如何使用React测试库编写使用RTK Query请求的组件的单元测试。例如,我们有一个组件从服务器获取某些东西的列表。如何为请求模拟数据?我发现可以使用mswjs在测试中模拟API,但即使这样,我仍然有一个问题 - 在检查集合中是否存在某些内容之前,我需要添加“await new Promise((r) => setTimeout(r, 1000));” 的延迟。也许,有人知道如何使用RTK Query测试组件吗?
我正在尝试使用RTK Query进行开发,但找不到一个好的示例来展示如何使用React测试库编写使用RTK Query请求的组件的单元测试。例如,我们有一个组件从服务器获取某些东西的列表。如何为请求模拟数据?我发现可以使用mswjs在测试中模拟API,但即使这样,我仍然有一个问题 - 在检查集合中是否存在某些内容之前,我需要添加“await new Promise((r) => setTimeout(r, 1000));” 的延迟。也许,有人知道如何使用RTK Query测试组件吗?
您可以查看RTK Query本身的测试。
一些提示:
msw
模拟APIstoreRef.wrapper
) await waitFor(() =>
expect(screen.getByTestId('isFetching').textContent).toBe('false')
)
jest.mock('pathToHook', () => ({
__esModule: true,
default: () => () => { data: 'whatever you want' },
}))
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useGetData } from './api'; // RTK Query API
import MyComponent from './MyComponent';
jest.mock('./useGetData');
describe('MyComponent', () => {
beforeEach(() => {
useGetData.mockClear();
});
it('should render data after API request', async () => {
const mockData = {
id: 1,
name: 'John Doe',
email: 'johndoe@example.com'
};
useGetData.mockReturnValueOnce({
data: mockData,
isLoading: false,
isSuccess: true,
isError: false,
error: null,
});
render(<MyComponent />);
// Check that loading state is not displayed
expect(screen.queryByText('Loading...')).toBeNull();
// Check that data is displayed correctly
expect(screen.getByText('Name: John Doe')).toBeInTheDocument();
expect(screen.getByText('Email: johndoe@example.com')).toBeInTheDocument();
});
});
MyComponent
在成功调用useGetData
钩子后是否正确显示数据。我们通过使用jest.mock
模拟它并使用useGetData.mockReturnValueOnce
设置模拟返回值来模拟useGetData
钩子。然后,我们渲染组件并使用expect语句验证未显示加载状态并且正确显示数据。值得注意的是,我们不需要等待API请求完成,因为useGetData
已经返回了我们希望测试的数据。