redux-devtools/packages/redux-devtools-rtk-query-monitor/test/rtk-query.mocks.ts
Fabrizio Vitale 24f60a7aa7
Feat #1126 Add Data Tab to rtk-query-monitor (#1129)
* fix: broken rtk-query-monitor demo not working #1126

Description:

downgrades framer-motion in order to remove the runtime error "_framerMotion.motion.custom is not a function"

See: https://stackoverflow.com/questions/66703410/next-js-framermotion-motion-custom-is-not-a-function

* feat(rtk-query): add Data tab #1126

* fix: bump min popup width to 700px #1126

Description:

improve UI of rtk-query right side tabs

* fix: bump min popup window width again to 760px #1126

* chore: add changeset

* feat(rtk-query): improve a11y of rtk-query-monitor tab panel #1126

* chore(rtk-query): add few integration tests to rtk-query-monitor #1126

* Fix merge

* Deduplicate msw

Co-authored-by: Nathan Bierema <nbierema@gmail.com>
2022-07-05 13:31:38 +00:00

85 lines
2.2 KiB
TypeScript

import {
combineReducers,
configureStore,
EnhancedStore,
Middleware,
} from '@reduxjs/toolkit';
import { createApi } from '@reduxjs/toolkit/query/react';
import type { BaseQueryFn, FetchArgs } from '@reduxjs/toolkit/query';
import type { ReduxDevTools } from './devtools.mocks';
export type MockBaseQuery<
Result,
Args = string | FetchArgs,
Meta = { status?: number }
> = BaseQueryFn<Args, Result, unknown, Meta>;
export type BaseQueryJestMockFunction<Result> = jest.Mock<
ReturnType<MockBaseQuery<Result>>,
Parameters<MockBaseQuery<Result>>
>;
export function createMockBaseQuery<Result>(
jestMockFn: BaseQueryJestMockFunction<Result>
): MockBaseQuery<Result> {
return async function mockBaseQuery(param, api, extra) {
try {
const output = await jestMockFn(param, api, extra);
return output;
} catch (error) {
return {
error,
};
}
};
}
export function createPokemonApi(
jestMockFn: BaseQueryJestMockFunction<Record<string, any>>
) {
return createApi({
reducerPath: 'pokemonApi',
keepUnusedDataFor: 9999,
baseQuery: createMockBaseQuery(jestMockFn),
tagTypes: ['pokemon'],
endpoints: (builder) => ({
getPokemonByName: builder.query<Record<string, any>, string>({
query: (name: string) => `pokemon/${name}`,
providesTags: (result, error, name: string) => [
{ type: 'pokemon' },
{ type: 'pokemon', id: name },
],
}),
}),
});
}
export function setupStore(
jestMockFn: BaseQueryJestMockFunction<Record<string, any>>,
devTools: typeof ReduxDevTools
) {
const pokemonApi = createPokemonApi(jestMockFn);
const reducer = combineReducers({
[pokemonApi.reducerPath]: pokemonApi.reducer,
});
const store: EnhancedStore<ReturnType<typeof reducer>> = configureStore({
reducer,
devTools: false,
// adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat([pokemonApi.middleware]) as Middleware[],
enhancers: [devTools.instrument()],
});
return {
jestMockFn,
devTools,
store,
reducer,
pokemonApi,
};
}