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>

.changeset/lemon-balloons-sniff.md

@@ -0,0 +1,5 @@
+---
+'@redux-devtools/rtk-query-monitor': minor
+---
+
+feat(rtk-query): add Data tab to rtk-query-monitor #1126 #1129

.changeset/popular-dodos-laugh.md

@@ -0,0 +1,5 @@
+---
+'rtk-query-demo': patch
+---
+
+fix: rtk-query-monitor demo not working #1126 #1129

.changeset/ten-files-return.md

@@ -0,0 +1,5 @@
+---
+'remotedev-redux-devtools-extension': patch
+---
+
+bump min popup window width to 760px #1126 #1129

extension/src/browser/views/includes/style.pug

@@ -7,7 +7,7 @@ style.
     overflow: hidden;
     height: 100%;
     width: 100%;
-    min-width: 350px;
+    min-width: 760px;
     min-height: 400px;
     margin: 0;
     padding: 0;
@@ -17,6 +17,7 @@ style.
     color: #fff;
   }
   #root {
+    min-width: 760px;
     height: 100%;
   }
   #root > div {

packages/redux-devtools-rtk-query-monitor/.eslintignore

@@ -1,2 +1,3 @@
 demo
 lib
+dist

packages/redux-devtools-rtk-query-monitor/.eslintrc.js

@@ -9,5 +9,13 @@ module.exports = {
         project: ['./tsconfig.json'],
       },
     },
+    {
+      files: ['test/**/*.ts', 'test/**/*.tsx'],
+      extends: '../../eslintrc.ts.react.jest.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.test.json'],
+      },
+    },
   ],
 };

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -20,7 +20,7 @@
     "@redux-devtools/rtk-query-monitor": "^3.0.0",
     "@reduxjs/toolkit": "^1.8.2",
     "framer-motion": "^6.3.15",
-    "msw": "^0.42.3",
+    "msw": "^0.43.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",

packages/redux-devtools-rtk-query-monitor/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+  },
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.test.json',
+    },
+  },
+};

packages/redux-devtools-rtk-query-monitor/package.json

@@ -37,10 +37,11 @@
     "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
     "build:types": "tsc --emitDeclarationOnly",
     "clean": "rimraf lib",
+    "test": "jest",
     "lint": "eslint . --ext .ts,.tsx",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run type-check && pnpm run lint"
+    "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
@@ -68,6 +69,9 @@
     "@babel/preset-typescript": "^7.17.12",
     "@redux-devtools/core": "^3.13.1",
     "@reduxjs/toolkit": "^1.8.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^27.5.2",
     "@types/hex-rgba": "^1.0.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react": "^18.0.14",
@@ -75,11 +79,16 @@
     "@typescript-eslint/parser": "^5.29.0",
     "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^27.5.1",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
+    "ts-jest": "^27.1.5",
     "typescript": "~4.7.4"
   },
   "peerDependencies": {

packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx

@@ -128,6 +128,7 @@ export class QueryForm extends React.PureComponent<
         {({ styling, base16Theme }) => {
           return (
             <form
+              id="rtk-query-monitor-query-selection-form"
               action="#"
               onSubmit={this.handleSubmit}
               {...styling('queryForm')}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewActions.tsx

@@ -1,8 +1,10 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ReactNode, PureComponent } from 'react';
 import { Action, AnyAction } from 'redux';
+import { QueryPreviewTabs } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { emptyRecord, identity } from '../utils/object';
-import { TreeView } from './TreeView';
+import { TreeView, TreeViewProps } from './TreeView';
 
 export interface QueryPreviewActionsProps {
   isWideLayout: boolean;
@@ -11,6 +13,12 @@ export interface QueryPreviewActionsProps {
 
 const keySep = ' - ';
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.actions),
+  id: renderTabPanelId(QueryPreviewTabs.actions),
+  role: 'tabpanel',
+};
+
 export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps> {
   selectFormattedActions: Selector<
     AnyAction[],
@@ -74,6 +82,7 @@ export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps>
 
     return (
       <TreeView
+        rootProps={rootProps}
         data={this.selectFormattedActions(actionsOfQuery)}
         isWideLayout={isWideLayout}
         shouldExpandNode={this.shouldExpandNode}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx

@@ -1,7 +1,8 @@
 import React, { ReactNode, PureComponent } from 'react';
-import { ApiStats, RtkQueryApiState } from '../types';
+import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
-import { TreeView } from './TreeView';
+import { TreeView, TreeViewProps } from './TreeView';
+import { renderTabPanelId, renderTabPanelButtonId } from '../utils/a11y';
 
 export interface QueryPreviewApiProps {
   apiStats: ApiStats | null;
@@ -9,6 +10,12 @@ export interface QueryPreviewApiProps {
   isWideLayout: boolean;
 }
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.apiConfig),
+  id: renderTabPanelId(QueryPreviewTabs.apiConfig),
+  role: 'tabpanel',
+};
+
 export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
   shouldExpandApiStateNode = (
     keyPath: (string | number)[],
@@ -33,7 +40,7 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
     return (
       <StyleUtilsContext.Consumer>
         {({ styling }) => (
-          <article {...styling('tabContent')}>
+          <article {...rootProps} {...styling('tabContent')}>
             <h2>{apiState.config.reducerPath}</h2>
             <TreeView
               before={<h3>State</h3>}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode, PureComponent } from 'react';
+import { QueryPreviewTabs, RtkResourceInfo } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
+import { TreeView, TreeViewProps } from './TreeView';
+
+export interface QueryPreviewDataProps {
+  data: RtkResourceInfo['state']['data'];
+  isWideLayout: boolean;
+}
+
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.data),
+  id: renderTabPanelId(QueryPreviewTabs.data),
+  role: 'tabpanel',
+};
+
+export class QueryPreviewData extends PureComponent<QueryPreviewDataProps> {
+  shouldExpandNode = (
+    keyPath: (string | number)[],
+    value: unknown,
+    layer: number
+  ): boolean => {
+    return layer <= 1;
+  };
+
+  render(): ReactNode {
+    const { data, isWideLayout } = this.props;
+
+    return (
+      <TreeView
+        rootProps={rootProps}
+        data={data}
+        isWideLayout={isWideLayout}
+        shouldExpandNode={this.shouldExpandNode}
+      />
+    );
+  }
+}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { QueryPreviewTabs, TabOption } from '../types';
+import { renderTabPanelButtonId } from '../utils/a11y';
 import { emptyArray } from '../utils/object';
 
 export interface QueryPreviewHeaderProps {
@@ -28,7 +29,11 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
           <div {...styling('previewHeader')}>
             <div {...styling('tabSelector')}>
               {tabs.map((tab) => (
-                <div
+                <button
+                  type="button"
+                  id={renderTabPanelButtonId(tab.value)}
+                  aria-selected={tab.value === selectedTab}
+                  role={'tab'}
                   onClick={() => this.handleTabClick(tab)}
                   key={tab.value}
                   {...styling(
@@ -42,7 +47,7 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
                   <span>
                     {renderTabLabel ? renderTabLabel(tab) : tab.label}
                   </span>
-                </div>
+                </button>
               ))}
             </div>
           </div>

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx

@@ -1,11 +1,12 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import { QueryStatus } from '@reduxjs/toolkit/dist/query';
 import React, { ReactNode, PureComponent } from 'react';
-import { RtkResourceInfo, RTKStatusFlags } from '../types';
+import { QueryPreviewTabs, RtkResourceInfo, RTKStatusFlags } from '../types';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { formatMs } from '../utils/formatters';
 import { identity } from '../utils/object';
 import { getQueryStatusFlags } from '../utils/rtk-query';
-import { TreeView } from './TreeView';
+import { TreeView, TreeViewProps } from './TreeView';
 
 type QueryTimings = {
   startedAt: string;
@@ -23,6 +24,12 @@ type FormattedQuery = {
   | { query: RtkResourceInfo['state'] }
 );
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.queryinfo),
+  id: renderTabPanelId(QueryPreviewTabs.queryinfo),
+  role: 'tabpanel',
+};
+
 export interface QueryPreviewInfoProps {
   resInfo: RtkResourceInfo;
   isWideLayout: boolean;
@@ -97,6 +104,7 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
 
     return (
       <TreeView
+        rootProps={rootProps}
         data={formattedQuery}
         isWideLayout={isWideLayout}
         shouldExpandNode={this.shouldExpandNode}

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewSubscriptions.tsx

@@ -1,6 +1,15 @@
 import React, { ReactNode, PureComponent } from 'react';
-import { RtkQueryApiState } from '../types';
+import { QueryPreviewTabs, RtkQueryApiState } from '../types';
-import { TreeView } from './TreeView';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
+import { TreeView, TreeViewProps } from './TreeView';
+
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(
+    QueryPreviewTabs.querySubscriptions
+  ),
+  id: renderTabPanelId(QueryPreviewTabs.querySubscriptions),
+  role: 'tabpanel',
+};
 
 export interface QueryPreviewSubscriptionsProps {
   subscriptions: RtkQueryApiState['subscriptions'][keyof RtkQueryApiState['subscriptions']];
@@ -12,7 +21,11 @@ export class QueryPreviewSubscriptions extends PureComponent<QueryPreviewSubscri
     const { subscriptions } = this.props;
 
     return (
-      <TreeView data={subscriptions} isWideLayout={this.props.isWideLayout} />
+      <TreeView
+        rootProps={rootProps}
+        data={subscriptions}
+        isWideLayout={this.props.isWideLayout}
+      />
     );
   }
 }

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewTags.tsx

@@ -1,11 +1,18 @@
 import React, { ReactNode, PureComponent } from 'react';
-import { RtkQueryTag } from '../types';
+import { QueryPreviewTabs, RtkQueryTag } from '../types';
-import { TreeView } from './TreeView';
+import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
+import { TreeView, TreeViewProps } from './TreeView';
 
 interface QueryPreviewTagsState {
   data: { tags: RtkQueryTag[] };
 }
 
+const rootProps: TreeViewProps['rootProps'] = {
+  'aria-labelledby': renderTabPanelButtonId(QueryPreviewTabs.queryTags),
+  id: renderTabPanelId(QueryPreviewTabs.queryTags),
+  role: 'tabpanel',
+};
+
 export interface QueryPreviewTagsProps {
   tags: RtkQueryTag[];
   isWideLayout: boolean;
@@ -26,6 +33,8 @@ export class QueryPreviewTags extends PureComponent<
   render(): ReactNode {
     const { isWideLayout, tags } = this.props;
 
-    return <TreeView data={tags} isWideLayout={isWideLayout} />;
+    return (
+      <TreeView rootProps={rootProps} data={tags} isWideLayout={isWideLayout} />
+    );
   }
 }

packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx

@@ -22,6 +22,9 @@ export interface TreeViewProps
   before?: ReactNode;
   after?: ReactNode;
   children?: ReactNode;
+  rootProps?: Partial<
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'>
+  >;
 }
 
 export class TreeView extends React.PureComponent<TreeViewProps> {
@@ -80,13 +83,14 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
       keyPath,
       shouldExpandNode,
       hideRoot,
+      rootProps,
     } = this.props;
 
     return (
       <StyleUtilsContext.Consumer>
         {({ styling, invertTheme, base16Theme }) => {
           return (
-            <div {...styling('treeWrapper')}>
+            <div {...rootProps} {...styling('treeWrapper')}>
               {before}
               <JSONTree
                 keyPath={keyPath}

packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx

@@ -33,6 +33,10 @@ import {
   QueryPreviewActionsProps,
 } from '../components/QueryPreviewActions';
 import { isTabVisible } from '../utils/tabs';
+import {
+  QueryPreviewData,
+  QueryPreviewDataProps,
+} from '../components/QueryPreviewData';
 
 export interface QueryPreviewProps<S = unknown> {
   readonly selectedTab: QueryPreviewTabs;
@@ -66,6 +70,14 @@ const MappedQueryPreviewInfo = mapProps<
   QueryPreviewInfoProps
 >(({ resInfo, isWideLayout }) => ({ resInfo, isWideLayout }))(QueryPreviewInfo);
 
+const MappedQueryPreviewData = mapProps<
+  QueryPreviewTabProps,
+  QueryPreviewDataProps
+>(({ resInfo, isWideLayout }) => ({
+  data: resInfo?.state?.data,
+  isWideLayout,
+}))(QueryPreviewData);
+
 const MappedQuerySubscriptipns = mapProps<
   QueryPreviewTabProps,
   QueryPreviewSubscriptionsProps
@@ -93,6 +105,16 @@ const MappedQueryPreviewActions = mapProps<
 const tabs: ReadonlyArray<
   TabOption<QueryPreviewTabs, QueryPreviewTabProps, RtkResourceInfo['type']>
 > = [
+  {
+    label: 'Data',
+    value: QueryPreviewTabs.data,
+    component: MappedQueryPreviewData,
+    visible: {
+      query: true,
+      mutation: true,
+      default: true,
+    },
+  },
   {
     label: 'Query',
     value: QueryPreviewTabs.queryinfo,

packages/redux-devtools-rtk-query-monitor/src/selectors.ts

@@ -258,6 +258,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
     ],
     (subscriptions, actions, tags) => {
       return {
+        [QueryPreviewTabs.data]: 0,
         [QueryPreviewTabs.queryTags]: tags.length,
         [QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {})
           .length,

packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts

@@ -220,6 +220,8 @@ const getSheetFromColorMap = (map: ColorMap) => {
       padding: '0 8px',
       display: 'inline-flex',
       alignItems: 'center',
+      boxShadow: 'none',
+      outline: 'none',
       color: map.TEXT_COLOR,
       'border-style': 'solid',
       'border-width': '1px',

packages/redux-devtools-rtk-query-monitor/src/types.ts

@@ -8,6 +8,7 @@ import type { QueryComparators } from './utils/comparators';
 import type { QueryFilters } from './utils/filters';
 
 export enum QueryPreviewTabs {
+  data,
   queryinfo,
   apiConfig,
   querySubscriptions,

packages/redux-devtools-rtk-query-monitor/src/utils/a11y.ts

@@ -0,0 +1,9 @@
+import { QueryPreviewTabs } from '../types';
+
+export function renderTabPanelId(value: QueryPreviewTabs): string {
+  return `rtk-query-monitor-tab-panel-${value}`;
+}
+
+export function renderTabPanelButtonId(value: QueryPreviewTabs): string {
+  return renderTabPanelId(value) + '-button';
+}

packages/redux-devtools-rtk-query-monitor/test/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

packages/redux-devtools-rtk-query-monitor/test/devtools.mocks.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { createDevTools } from '@redux-devtools/core';
+import { RtkQueryMonitor } from '../src';
+
+const MonitorAsAny = RtkQueryMonitor as any;
+
+export const ReduxDevTools = createDevTools(<MonitorAsAny />);

packages/redux-devtools-rtk-query-monitor/test/integration.spec.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ReduxDevTools } from './devtools.mocks';
+import { BaseQueryJestMockFunction, setupStore } from './rtk-query.mocks';
+
+function Providers({
+  store,
+  children,
+}: {
+  store: ReturnType<typeof setupStore>['store'];
+  children?: React.ComponentProps<typeof Provider>['children'];
+}) {
+  const AnyProvider = Provider as any;
+
+  return (
+    <div id="app-root">
+      <AnyProvider store={store}>
+        {children}
+        <ReduxDevTools />
+      </AnyProvider>
+    </div>
+  );
+}
+
+describe('rtk-query-monitor standalone integration', () => {
+  // Hushes symbol.observable warning
+  // @see https://github.com/reduxjs/redux-devtools/issues/1002
+  jest.spyOn(console, 'warn');
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  (console.warn as jest.Mock<void>).mockImplementation(() => {});
+
+  const dataPanelDomId = '#rtk-query-monitor-tab-panel-0';
+
+  const childrenTextContent = 'Renders children';
+  const fetchBaseQueryMock: BaseQueryJestMockFunction<Record<string, unknown>> =
+    jest.fn((...fetchArgs) =>
+      Promise.resolve({
+        data: {
+          name: fetchArgs[0],
+        },
+      })
+    );
+  const { store, pokemonApi } = setupStore(fetchBaseQueryMock, ReduxDevTools);
+
+  beforeAll(() => {
+    // let's populate api
+    (store.dispatch as any)(
+      pokemonApi.endpoints.getPokemonByName.initiate('bulbasaur')
+    );
+  });
+
+  beforeEach(() => {
+    fetchBaseQueryMock.mockClear();
+  });
+
+  afterAll(() => {
+    (console.warn as jest.Mock<void>).mockRestore();
+  });
+
+  it('renders on a standalone app without crashing', () => {
+    const { container } = render(
+      <Providers store={store}>
+        <div data-testid="children">{childrenTextContent}</div>
+      </Providers>
+    );
+
+    expect(screen.getByTestId('children').textContent).toBe(
+      childrenTextContent
+    );
+
+    expect(
+      screen
+        .getByRole('tab', { name: /actions/i })
+        ?.textContent?.toLowerCase()
+        .trim()
+    ).toBe('actions');
+    expect(
+      screen
+        .getByRole('tab', { name: /data/i })
+        ?.textContent?.toLowerCase()
+        .trim()
+    ).toBe('data');
+    expect(
+      screen
+        .getByRole('tab', { name: /api/i })
+        ?.textContent?.toLowerCase()
+        .trim()
+    ).toBe('api');
+    expect(
+      container.querySelector(
+        'form[id="rtk-query-monitor-query-selection-form"]'
+      )
+    ).toBeDefined();
+  });
+
+  it('displays query data tab content', async () => {
+    // `Promise.resolve()` hushes `@typescript-eslint/await-thenable`
+    await Promise.resolve(pokemonApi.util.getRunningOperationPromises());
+
+    const { container } = render(
+      <Providers store={store}>
+        <div data-testid="children">{childrenTextContent}</div>
+      </Providers>
+    );
+
+    // We need to select the query & the correct tab
+    fireEvent.click(screen.getByRole('tab', { name: /data/i }));
+    fireEvent.click(screen.getByText(/bulbasaur/i));
+
+    await waitFor(() =>
+      expect(container.querySelector(dataPanelDomId)).not.toBeNull()
+    );
+
+    expect(container.querySelector(dataPanelDomId)?.textContent).toMatch(
+      /name\W+pokemon\/bulbasaur/i
+    );
+  });
+});

packages/redux-devtools-rtk-query-monitor/test/rtk-query.mocks.ts

@@ -0,0 +1,84 @@
+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,
+  };
+}

packages/redux-devtools-rtk-query-monitor/tsconfig.test.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "types": ["jest"]
+  },
+  "include": ["src", "test"],
+  "exclude": ["dist"]
+}

pnpm-lock.yaml

@@ -1788,7 +1788,10 @@ importers:
       '@redux-devtools/core': ^3.13.1
       '@redux-devtools/ui': ^1.3.0
       '@reduxjs/toolkit': ^1.8.2
+      '@testing-library/jest-dom': ^5.16.4
+      '@testing-library/react': ^13.3.0
       '@types/hex-rgba': ^1.0.1
+      '@types/jest': ^27.5.2
       '@types/lodash': ^4.14.182
       '@types/lodash.debounce': ^4.0.7
       '@types/prop-types': ^15.7.5
@@ -1798,20 +1801,25 @@ importers:
       '@typescript-eslint/parser': ^5.29.0
       eslint: ^8.18.0
       eslint-config-prettier: ^8.5.0
+      eslint-plugin-jest: ^26.5.3
       eslint-plugin-react: ^7.30.1
       eslint-plugin-react-hooks: ^4.6.0
       hex-rgba: ^1.0.2
       immutable: ^4.1.0
+      jest: ^27.5.1
       jss: ^10.9.0
       jss-preset-default: ^10.9.0
       lodash.debounce: ^4.0.8
       prop-types: ^15.8.1
       react: ^18.2.0
       react-base16-styling: ^0.9.1
+      react-dom: ^18.2.0
       react-json-tree: ^0.17.0
+      react-redux: ^8.0.2
       redux: ^4.2.0
       redux-devtools-themes: ^1.0.0
       rimraf: ^3.0.2
+      ts-jest: ^27.1.5
       typescript: ~4.7.4
     dependencies:
       '@babel/runtime': 7.18.3
@@ -1837,19 +1845,27 @@ importers:
       '@babel/preset-react': 7.17.12_@babel+core@7.18.5
       '@babel/preset-typescript': 7.17.12_@babel+core@7.18.5
       '@redux-devtools/core': link:../redux-devtools
-      '@reduxjs/toolkit': 1.8.2_react@18.2.0
+      '@reduxjs/toolkit': 1.8.2_kkwg4cbsojnjnupd3btipussee
+      '@testing-library/jest-dom': 5.16.4
+      '@testing-library/react': 13.3.0_biqbaboplfbrettd7655fr4n2y
       '@types/hex-rgba': 1.0.1
+      '@types/jest': 27.5.2
       '@types/lodash.debounce': 4.0.7
       '@types/react': 18.0.14
       '@typescript-eslint/eslint-plugin': 5.29.0_qqmbkyiaixvppdwswpytuf2hgm
       '@typescript-eslint/parser': 5.29.0_b5e7v2qnwxfo6hmiq56u52mz3e
       eslint: 8.18.0
       eslint-config-prettier: 8.5.0_eslint@8.18.0
+      eslint-plugin-jest: 26.5.3_hkaktba3mic4t6mktu5mmyzyhi
       eslint-plugin-react: 7.30.1_eslint@8.18.0
       eslint-plugin-react-hooks: 4.6.0_eslint@8.18.0
+      jest: 27.5.1
       react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-redux: 8.0.2_42iqcqzqjdyq32nxzztmetzyhu
       redux: 4.2.0
       rimraf: 3.0.2
+      ts-jest: 27.1.5_7giygfzd3xe4pjz4ngu3nwlqbm
       typescript: 4.7.4
 
   packages/redux-devtools-rtk-query-monitor/demo:
@@ -1886,7 +1902,7 @@ importers:
       fork-ts-checker-webpack-plugin: ^7.2.11
       framer-motion: ^6.3.15
       html-webpack-plugin: ^5.5.0
-      msw: ^0.42.3
+      msw: ^0.43.0
       react: ^18.2.0
       react-dom: ^18.2.0
       react-icons: ^4.4.0
@@ -1911,7 +1927,7 @@ importers:
       '@redux-devtools/rtk-query-monitor': link:..
       '@reduxjs/toolkit': 1.8.2_kkwg4cbsojnjnupd3btipussee
       framer-motion: 6.3.15_biqbaboplfbrettd7655fr4n2y
-      msw: 0.42.3_typescript@4.7.4
+      msw: 0.43.0_typescript@4.7.4
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-icons: 4.4.0_react@18.2.0
@@ -5999,29 +6015,10 @@ packages:
     dependencies:
       immer: 9.0.15
       react: 18.2.0
-      react-redux: 8.0.2_fzknh3pugl53jp7xsetxkg5ani
+      react-redux: 8.0.2_42iqcqzqjdyq32nxzztmetzyhu
       redux: 4.2.0
       redux-thunk: 2.4.1_redux@4.2.0
       reselect: 4.1.6
-    dev: false
-
-  /@reduxjs/toolkit/1.8.2_react@18.2.0:
-    resolution: {integrity: sha512-CtPw5TkN1pHRigMFCOS/0qg3b/yfPV5qGCsltVnIz7bx4PKTJlGHYfIxm97qskLknMzuGfjExaYdXJ77QTL0vg==}
-    peerDependencies:
-      react: ^16.9.0 || ^17.0.0 || ^18 || 18
-      react-redux: ^7.2.1 || ^8.0.0-beta
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-redux:
-        optional: true
-    dependencies:
-      immer: 9.0.15
-      react: 18.2.0
-      redux: 4.2.0
-      redux-thunk: 2.4.1_redux@4.2.0
-      reselect: 4.1.6
-    dev: true
 
   /@restart/hooks/0.4.7_react@18.2.0:
     resolution: {integrity: sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==}
@@ -16403,43 +16400,6 @@ packages:
   /ms/2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  /msw/0.42.3_typescript@4.7.4:
-    resolution: {integrity: sha512-zrKBIGCDsNUCZLd3DLSeUtRruZ0riwJgORg9/bSDw3D0PTI8XUGAK3nC0LJA9g0rChGuKaWK/SwObA8wpFrz4g==}
-    engines: {node: '>=14'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      typescript: '>= 4.2.x <= 4.7.x'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@mswjs/cookies': 0.2.1
-      '@mswjs/interceptors': 0.16.6
-      '@open-draft/until': 1.0.3
-      '@types/cookie': 0.4.1
-      '@types/js-levenshtein': 1.1.1
-      chalk: 4.1.1
-      chokidar: 3.5.3
-      cookie: 0.4.2
-      graphql: 16.5.0
-      headers-polyfill: 3.0.7
-      inquirer: 8.2.4
-      is-node-process: 1.0.1
-      js-levenshtein: 1.1.6
-      node-fetch: 2.6.7
-      outvariant: 1.3.0
-      path-to-regexp: 6.2.1
-      statuses: 2.0.1
-      strict-event-emitter: 0.2.4
-      type-fest: 1.4.0
-      typescript: 4.7.4
-      yargs: 17.5.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: false
-
   /msw/0.43.0_typescript@4.7.4:
     resolution: {integrity: sha512-XJylZP0qW3D5WUGWh9FFefJEl3MGG4y1I+/8a833d0eedm6B+GaPm6wPVZNcnlS2YVTagvEgShVJ7ZtY66tTRQ==}
     engines: {node: '>=14'}
@@ -16476,7 +16436,6 @@ packages:
       - encoding
       - supports-color
     dev: false
-    optional: true
 
   /multicast-dns/7.2.5:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
@@ -18192,7 +18151,6 @@ packages:
       react-is: 18.2.0
       redux: 4.2.0
       use-sync-external-store: 1.2.0_react@18.2.0
-    dev: true
 
   /react-redux/8.0.2_fzknh3pugl53jp7xsetxkg5ani:
     resolution: {integrity: sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==}