Не работает mock-server MSW и RTK хук висит в состоянии pending
Пишу тест, который будет проверять работу хука из Redux RTK Query. Пытался сделать mock сервер используя MSW библиотеку, но по какой то причине, сервер не работает, а хук при запросе висит в состоянии pending.
Создал обработчик, который будет возвращать моковые данные
// handlers.ts
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('/api/0.3/dict/weather/precipitation', () => {
return HttpResponse.json({
Mix: 'Смешанные осадки',
NoPrecipitation: 'Нет осадков',
Rain: 'Дождь',
Snow: 'Снег',
}, { status: 200 });
}),
];
Создал моковый сервер
// mock-server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);
Подключил для тестов
//setupTests.ts
import { server } from './mock-server';
beforeAll(() => server.listen());
beforeEach(() => server.resetHandlers());
afterAll(() => server.close());
Написал тест
// weatherApi.test.tsx
import { ReactNode } from 'react';
import { renderHook, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import { createBrowserHistory, History } from 'history';
import { getStore } from 'src/store';
import { useGetDictPrecipitationsQuery } from 'src/api/rest';
const history: History = createBrowserHistory();
const store = getStore(history);
function Wrapper({ children }: { children: ReactNode }) {
return <Provider store={store}>{children}</Provider>;
}
describe('useGetDictPrecipitationsQuery hook test', () => {
const mockData = {
Mix: 'Смешанные осадки',
NoPrecipitation: 'Нет осадков',
Rain: 'Дождь',
Snow: 'Снег',
};
const endpointName = 'getDictPrecipitations';
it('render hook', async () => {
const { result } = renderHook(() => useGetDictPrecipitationsQuery(), { wrapper: Wrapper });
expect(result.current).toMatchObject({
status: 'pending',
endpointName,
isLoading: true,
isSuccess: false,
isError: false,
isFetching: true,
});
await waitFor(() => expect(result.current.isSuccess).toBe(true));
expect(global.fetch).toHaveBeenCalledTimes(1);
expect(result.current).toMatchObject({
status: 'fulfilled',
endpointName,
data: mockData,
isLoading: false,
isSuccess: true,
isError: false,
currentData: mockData,
isFetching: false,
});
});
});
И тест падает на строке с проверкой isSuccess
, потому что сервак ни ошибки, ни результат не возвращает, вечно в pending статусе и isFetching: true
Пробовал тестировать хук с использованием fetchMock, все работает, а вот с MSW нет