jest mocking

src/__tests__/mocks/api/list/get-list.ts

@@ -0,0 +1,18 @@
+import { jest } from '@jest/globals';
+import { listService } from '../../../../service/list';
+import { GetListResponse } from '../../../../service/list/types';
+
+export const spyedGetList = jest.spyOn(listService, 'getList');
+
+export const mockGetList = (data?: GetListResponse) => {
+  spyedGetList.mockResolvedValueOnce(
+    data ?? [
+      { id: 1, title: 'title', description: 'description' },
+      { id: 2, title: 'title', description: 'description' },
+      { id: 3, title: 'title', description: 'description' },
+      { id: 4, title: 'title', description: 'description' },
+      { id: 5, title: 'title', description: 'description' }
+    ]
+  );
+  return spyedGetList;
+};

src/__tests__/mocks/brojs-cli.ts

@@ -0,0 +1,25 @@
+import { jest } from '@jest/globals';
+
+jest.mock<typeof import('@brojs/cli')>('@brojs/cli', () => {
+  global.System = {
+    get: () => ({
+      getConfig: jest.fn(),
+      getConfigValue: jest.fn(),
+      getNavigations: jest.fn(),
+      getNavigationsValue: jest.fn(),
+      getAllFeatures: jest.fn(),
+      getFeatures: jest.fn(),
+      getHistory: jest.fn(),
+      getNavigation: jest.fn(),
+      getNavigationValue: jest.fn()
+    })
+  };
+  const originalBroJsCli = jest.requireActual<typeof import('@brojs/cli')>('@brojs/cli');
+
+  return {
+    ...originalBroJsCli,
+    getConfigValue: () => {
+      return 'mocked_value';
+    }
+  };
+});

src/__tests__/setup.ts

@@ -1 +1,3 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/jest-globals';
+
+import './mocks/brojs-cli';

src/__tests__/test-wrapper.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { setupStore } from '../store';
+import { Provider } from 'react-redux';
+
+export const TestWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <Provider store={setupStore()}>{children}</Provider>;
+};

src/components/heading/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { describe, test } from '@jest/globals';
+import { describe, test, expect } from '@jest/globals';
 import Heading from '../index';
 import { HeadingVariant } from '../types';
 

src/container/list/__tests__/index.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { describe, expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import ListPage from '../index';
+import { TestWrapper } from '../../../__tests__/test-wrapper';
+import { mockGetList, spyedGetList } from '../../../__tests__/mocks/api/list/get-list';
+
+describe('ListPage', () => {
+  test('renders', async () => {
+    const mockedGetList = mockGetList();
+
+    render(<ListPage />, {
+      wrapper: TestWrapper
+    });
+
+    expect(screen.getByText('List Page New')).toBeInTheDocument();
+
+    expect(await screen.findByText('1: title - description')).toBeInTheDocument();
+    expect(mockedGetList).toHaveBeenCalled();
+  });
+
+  test('Отображается ошибка', async () => {
+    spyedGetList.mockRejectedValueOnce({
+      message: 'В доступе отказано'
+    });
+
+    render(<ListPage />, {
+      wrapper: TestWrapper
+    });
+
+    expect(await screen.findByText('Произошла ошибка')).toBeInTheDocument();
+  });
+});

src/container/main/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './router';
-import { store } from '../../store';
+import { setupStore } from '../../store';
 import { Provider } from 'react-redux';
 import { useKeycloak } from './keycloak';
 
+const store = setupStore();
+
 const Main = (): React.ReactElement | string => {
   const { isLoading } = useKeycloak();
 

src/store/index.ts

@@ -1,20 +1,24 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { api } from './api';
 import { setupListeners } from '@reduxjs/toolkit/query';
 
-export const store = configureStore({
-  reducer: {
-    // Add the generated reducer as a specific top-level slice
-    [api.reducerPath]: api.reducer
-  },
-  // Adding the api middleware enables caching, invalidation, polling,
-  // and other useful features of `rtk-query`.
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware)
+const rootReducer = combineReducers({
+  [api.reducerPath]: api.reducer
 });
 
-setupListeners(store.dispatch);
+export function setupStore(preloadedState?: Partial<RootState>) {
+  const store = configureStore({
+    reducer: rootReducer,
+    preloadedState: preloadedState,
+    // Adding the api middleware enables caching, invalidation, polling,
+    // and other useful features of `rtk-query`.
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware)
+  });
+  setupListeners(store.dispatch);
+  return store;
+}
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<typeof store.getState>;
-// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppStore = ReturnType<typeof setupStore>;
+export type AppDispatch = AppStore['dispatch'];