fix: add ts strict mode and fix ts errors

TomatoVan · Dec 4, 2023 · 51d9cae · 51d9cae
1 parent b2890f1
commit 51d9cae
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 47 deletions.
diff --git a/config/storybook/webpack.config.ts b/config/storybook/webpack.config.ts
@@ -3,35 +3,37 @@ import path from 'path';
 import { buildCssLoader } from '../build/loaders/buildCssLoader';
 import { BuildPaths } from '../build/types/config';
 
-export default ({ config }: {config: webpack.Configuration}) => {
+export default ({ config }: { config: webpack.Configuration }) => {
     const paths: BuildPaths = {
         build: '',
         html: '',
         entry: '',
         src: path.resolve(__dirname, '..', '..', 'src'),
     };
-    config.resolve.modules.push(paths.src);
-    config.resolve.extensions.push('.ts', '.tsx');
+  config!.resolve!.modules!.push(paths.src);
+  config!.resolve!.extensions!.push('.ts', '.tsx');
 
-    // eslint-disable-next-line no-param-reassign
-    config.module.rules = config.module.rules.map((rule: RuleSetRule) => {
-        if (/svg/.test(rule.test as string)) {
-            return { ...rule, exclude: /\.svg$/i };
-        }
+  // @ts-ignore
+  config!.module!.rules = config!.module!.rules!.map((rule: RuleSetRule) => {
+      if (/svg/.test(rule.test as string)) {
+          return { ...rule, exclude: /\.svg$/i };
+      }
 
-        return rule;
-    });
+      return rule;
+  });
 
-    config.module.rules.push({
-        test: /\.svg$/,
-        use: ['@svgr/webpack'],
-    });
-    config.module.rules.push(buildCssLoader(true));
+  config!.module!.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+  });
+  config!.module!.rules.push(buildCssLoader(true));
 
-    config.plugins.push(new DefinePlugin({
-	    __IS_DEV__: JSON.stringify(true),
-	    __API__: JSON.stringify(''),
-    }));
+  config!.plugins!.push(
+      new DefinePlugin({
+          __IS_DEV__: JSON.stringify(true),
+          __API__: JSON.stringify(''),
+      }),
+  );
 
-    return config;
+  return config;
 };
diff --git a/src/app/providers/StoreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts
@@ -1,7 +1,8 @@
-import { configureStore, ReducersMapObject } from '@reduxjs/toolkit';
+import { configureStore, Reducer, ReducersMapObject } from '@reduxjs/toolkit';
 import { $api } from 'shared/api/api';
 import { To } from '@remix-run/router';
 import { NavigateOptions } from 'react-router/dist/lib/context';
+import { CombinedState } from 'redux';
 import { counterReducer } from '../../../../entities/Counter';
 import { userReducer } from '../../../../entities/User';
 import { StateSchema } from './StateSchema';
@@ -21,8 +22,7 @@ export function createReduxStore(
     const reducerManager = createReducerManager(rootReducers);
 
     const store = configureStore({
-        // @ts-ignore
-        reducer: reducerManager.reduce as ReducersMapObject<StateSchema>,
+        reducer: reducerManager.reduce as Reducer<CombinedState<StateSchema>>,
         devTools: __IS_DEV__,
         preloadedState: initialState,
         middleware: (getDefaultMiddleware) => getDefaultMiddleware({

diff --git a/src/entities/Profile/model/types/profile.ts b/src/entities/Profile/model/types/profile.ts
@@ -1,14 +1,14 @@
 import { Country, Currency } from 'shared/const/common';
 
 export interface Profile {
-	'first': string,
-	'lastname': string,
-	'age': number,
-	'currency': Currency,
-	'country': Country,
-	'city': string,
-	'username': string,
-	'avatar': string
+	first: string,
+	lastname: string,
+	age: number,
+	currency: Currency,
+	country: Country,
+	city: string,
+	username: string,
+	avatar: string
 }
 
 export interface ProfileSchema {

diff --git a/src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.test.ts b/src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.test.ts
@@ -1,12 +1,7 @@
-import axios from 'axios';
 import { userActions } from 'entities/User';
 import { TestAsyncThunk } from 'shared/lib/tests/TestAsyncThunk/TestAsyncThunk';
 import { loginByUsername } from './loginByUsername';
 
-jest.mock('axios');
-
-const mockedAxios = jest.mocked(axios, true);
-
 describe('loginByUsername.test', () => {
     // let dispatch: Dispatch;
     // let getState: () => StateSchema;
@@ -41,26 +36,27 @@ describe('loginByUsername.test', () => {
 
     test('loginByUsername async thunk test', async () => {
         const userValue = { username: '123', id: '1' };
-        mockedAxios.post.mockReturnValue(Promise.resolve({ data: userValue }));
 
         const thunk = new TestAsyncThunk(loginByUsername);
+        thunk.api.post.mockReturnValue(Promise.resolve({ data: userValue }));
+
         const result = await thunk.callThunk({ username: '123', password: '123' });
 
         expect(thunk.dispatch).toHaveBeenCalledWith(userActions.setAuthData(userValue));
         expect(thunk.dispatch).toHaveBeenCalledTimes(3);
-        expect(mockedAxios.post).toHaveBeenCalled();
+        expect(thunk.api.post).toHaveBeenCalled();
         expect(result.meta.requestStatus).toBe('fulfilled');
         expect(result.payload).toEqual(userValue);
     });
 
     test('loginByUsername async error thunk test', async () => {
-        mockedAxios.post.mockReturnValue(Promise.resolve({ status: 403 }));
-
         const thunk = new TestAsyncThunk(loginByUsername);
+        thunk.api.post.mockReturnValue(Promise.resolve({ status: 403 }));
+
         const result = await thunk.callThunk({ username: '123', password: '123' });
 
         expect(thunk.dispatch).toHaveBeenCalledTimes(2);
-        expect(mockedAxios.post).toHaveBeenCalled();
+        expect(thunk.api.post).toHaveBeenCalled();
         expect(result.meta.requestStatus).toBe('rejected');
         expect(result.payload).toBe('error');
     });

diff --git a/src/shared/lib/tests/TestAsyncThunk/TestAsyncThunk.ts b/src/shared/lib/tests/TestAsyncThunk/TestAsyncThunk.ts
@@ -1,25 +1,43 @@
 import { StateSchema } from 'app/providers/StoreProvider';
 import { AsyncThunkAction } from '@reduxjs/toolkit';
+import axios, { AxiosStatic } from 'axios';
 
 type ActionCreatorType<Return, Arg, RejectedValue>
 = (arg: Arg) => AsyncThunkAction<Return, Arg, { rejectValue: RejectedValue }>;
 
+jest.mock('axios');
+
+const mockedAxios = jest.mocked(axios, true);
+
 export class TestAsyncThunk<Return, Arg, RejectedValue> {
     dispatch: jest.MockedFn<any>;
 
     getState: () => StateSchema;
 
     actionCreator: ActionCreatorType<Return, Arg, RejectedValue>;
 
+    api:jest.MockedFunctionDeep<AxiosStatic>;
+
+    navigate: jest.MockedFn<any>;
+
     constructor(actionCreator: ActionCreatorType<Return, Arg, RejectedValue>) {
         this.actionCreator = actionCreator;
         this.dispatch = jest.fn();
         this.getState = jest.fn();
+        this.api = mockedAxios;
+        this.navigate = jest.fn();
     }
 
     async callThunk(arg: Arg) {
         const action = this.actionCreator(arg);
-        const result = await action(this.dispatch, this.getState, undefined);
+        const result = await action(
+            this.dispatch,
+            this.getState,
+            {
+                api: this.api,
+                navigate: this.navigate,
+            },
+        );
 
         return result;
     }

diff --git a/src/shared/lib/tests/componentRender/componentRender.tsx b/src/shared/lib/tests/componentRender/componentRender.tsx
@@ -16,13 +16,12 @@ export function componentRender(component: ReactNode, options: componentRenderOp
         initialState,
     } = options;
     return render(
-        <StoreProvider initialState={initialState}>
-            <MemoryRouter initialEntries={[route]}>
+        <MemoryRouter initialEntries={[route]}>
+            <StoreProvider initialState={initialState}>
                 <I18nextProvider i18n={i18nForTests}>
                     {component}
                 </I18nextProvider>
-            </MemoryRouter>
-        </StoreProvider>
-        ,
+            </StoreProvider>
+        </MemoryRouter>,
     );
 }