mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-10 19:56:54 +03:00
24f60a7aa7
* 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>
85 lines
2.2 KiB
TypeScript
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,
|
|
};
|
|
}
|