jest mocking

jest.config.js

@@ -21,7 +21,7 @@ const config = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!**/__tests__/**/*'],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
@@ -152,7 +152,7 @@ const config = {
   // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files
-  testMatch: ['**/?(*.)+(test).[tj]s?(x)']
+  testMatch: ['**/?(*.)+(test).[tj]s?(x)'],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [
@@ -172,10 +172,7 @@ const config = {
   // transform: undefined,
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "\\\\node_modules\\\\",
-  //   "\\.pnp\\.[^\\\\]+$"
-  // ],
+  transformIgnorePatterns: ['\\\\node_modules\\\\(?!(@brojs)/)', '\\.pnp\\.[^\\\\]+$']
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

package.json

@@ -32,7 +32,6 @@
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
-        "@types/jest": "^29.5.14",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@types/webpack-env": "^1.18.5",

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
+const rootReducer = combineReducers({
   [api.reducerPath]: api.reducer
-  },
+});
+
+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);
+  });
+  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'];

tsconfig.json

@@ -5,6 +5,7 @@
             "es2017"
         ],
         "outDir": "./dist/",
+        "skipLibCheck": true,
         "sourceMap": true,
         "esModuleInterop": true,
         "noImplicitAny": false,
@@ -12,13 +13,17 @@
         "moduleResolution": "Bundler",
         "target": "es6",
         "jsx": "react",
-        "typeRoots": ["node_modules/@types", "src/typings"],
+        "typeRoots": ["node_modules/@types", "@types"],
         "resolveJsonModule": true
     },
+    "include": [
+        "src",
+        "@types/**/*"
+    ],
     "exclude": [
         "node_modules",
-        "**/*.test.ts",
-        "**/*.test.tsx",
+//        "**/*.test.ts",
+//        "**/*.test.tsx",
         "node_modules/@types/jest"
     ]        
 }