jest mocking

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
+};

jest.config.js

@@ -0,0 +1,190 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "C:\\Users\\nekit\\AppData\\Local\\Temp\\jest",
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!**/__tests__/**/*'],
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage',
+
+  // An array of regexp pattern strings used to skip coverage collection
+  coveragePathIgnorePatterns: ['\\\\node_modules\\\\'],
+
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: 'v8',
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "mjs",
+  //   "cjs",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "json",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  // moduleNameMapper: {},
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  setupFilesAfterEnv: ['<rootDir>/src/__tests__/setup.ts'],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  testEnvironment: 'jsdom',
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  testMatch: ['**/?(*.)+(test).[tj]s?(x)'],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "\\\\node_modules\\\\"
+  // ],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // A map from regular expressions to paths to transformers
+  // transform: undefined,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  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,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};
+
+module.exports = config;

package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "main": "./src/index.tsx",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "jest",
         "start": "brojs server --port=8099 --with-open-browser",
         "build": "npm run clean && brojs build --dev",
         "build:prod": "npm run clean && brojs build",
@@ -29,6 +29,9 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.14.0",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.1.0",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@types/webpack-env": "^1.18.5",
@@ -39,6 +42,8 @@
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.0.0",
         "globals": "^15.12.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "typescript-eslint": "^8.13.0"
     }
 }

src/__tests__/index.test.ts

@@ -0,0 +1,10 @@
+import { sum } from './mocks/sum';
+import { describe, test, expect } from '@jest/globals';
+
+describe('Тесты на функцию sum', () => {
+  test('1 + 2 = 3', () => {
+    const result = sum(1, 2);
+
+    expect(result).toBe(3);
+  });
+});

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__/mocks/sum.ts

@@ -0,0 +1,3 @@
+export function sum(a, b) {
+  return a + b;
+}

src/__tests__/setup.ts

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect } from '@jest/globals';
+import Heading from '../index';
+import { HeadingVariant } from '../types';
+
+describe('Heading', () => {
+  test('рендерит children', () => {
+    const children = 'Hello';
+    render(<Heading>{children}</Heading>);
+
+    const headingEl = screen.getByText(children);
+    expect(headingEl).toBeInTheDocument();
+  });
+
+  test('может рендерится как h2, h3 и h4', () => {
+    const { rerender } = render(<Heading variant={HeadingVariant.h2}>Hello</Heading>);
+
+    let headingEl = screen.getByRole('heading', {
+      level: 2
+    });
+    expect(headingEl).toBeInTheDocument();
+
+    rerender(<Heading variant={HeadingVariant.h3}>Hello</Heading>);
+
+    headingEl = screen.getByRole('heading', {
+      level: 3
+    });
+    expect(headingEl).toBeInTheDocument();
+
+    rerender(<Heading variant={HeadingVariant.h4}>Hello</Heading>);
+
+    headingEl = screen.getByRole('heading', {
+      level: 4
+    });
+    expect(headingEl).toBeInTheDocument();
+  });
+});

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'];

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"
     ]        
 }