fix!: testing + linting technical debt (#945)

* Update + pin key testing dependencies, and adds jest-environment-jsdom + jest-fail-on-console

* Extract Jest config into its own typed config file, fix test environment, and enable failures on console warnings

* Corrected usage of ReactDOMTestUtils.act, fixes broken tests in latest versions of testing-library/jest

* Update eslint jest related deps, and include jest configs in tsconfig

* Use correct types, avoid improper use of any, fix linter warnings

* This must have been a typo

* Just use a self-invoked function

Also, void functions and Promise<void>'s resolve to undefined, so there is no purpose in returning at the end.

* Fix for "Warning: React version not specified in eslint-plugin-react settings"

* fix: actually fail on console.warn

.eslintrc.json

@@ -26,5 +26,10 @@
     "@typescript-eslint/no-empty-function": 0,
     "react/prop-types": 0,
     "@typescript-eslint/no-non-null-assertion": 0
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

jest.config.ts

@@ -0,0 +1,25 @@
+import type {Config} from 'jest';
+
+const config: Config = {
+  coveragePathIgnorePatterns: [
+    "/node_modules/"
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: -10
+    }
+  },
+  preset: "ts-jest",
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "/__fixtures__/",
+    "<rootDir>/build"
+  ],
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+};
+
+export default config;

jest.setup.ts

@@ -0,0 +1,3 @@
+import failOnConsole from 'jest-fail-on-console'
+
+failOnConsole();

package.json

@@ -19,50 +19,33 @@
     "generate-docs": "typedoc --out docs src",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json"
   },
-  "jest": {
-    "coveragePathIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "coverageThreshold": {
-      "global": {
-        "branches": 80,
-        "functions": 80,
-        "lines": 80,
-        "statements": -10
-      }
-    },
-    "preset": "ts-jest",
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/__fixtures__/",
-      "<rootDir>/build"
-    ]
-  },
   "dependencies": {
     "oidc-client-ts": "^2.0.5"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.4.0",
-    "@testing-library/react": "^11.0.4",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
     "@types/faker": "^6.6.9",
-    "@types/jest": "^26.0.10",
+    "@types/jest": "29.4.0",
     "@types/node": "^17.0.29",
     "@types/react": "^18.0.8",
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "5.54.0",
+    "@typescript-eslint/parser": "5.54.0",
     "bundlewatch": "^0.3.2",
     "eslint": "^7.9.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jest": "^26.7.0",
+    "eslint-plugin-jest": "27.2.1",
     "eslint-plugin-react": "^7.19.0",
     "faker": "^6.6.6",
-    "jest": "^25.3.0",
-    "jest-cli": "^26.0.1",
+    "jest": "29.4.3",
+    "jest-cli": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
+    "jest-fail-on-console": "3.0.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "ts-jest": "^25.3.1",
+    "ts-jest": "29.0.5",
     "ts-node-dev": "^1.0.0-pre.40",
     "typedoc": "0.23.24",
     "typedoc-plugin-markdown": "3.14.0",
@@ -72,4 +55,4 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || || ^17.0.0 ||  ^18.0.0"
   }
-}
+}

src/AuthContext.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState, useEffect, useRef, PropsWithChildren, useMemo, useCallback } from 'react';
-import { UserManager, User } from 'oidc-client-ts';
+import { UserManager, User, SigninRedirectArgs, SignoutRedirectArgs } from 'oidc-client-ts';
 import {
   Location,
   AuthProviderProps,
@@ -105,15 +105,15 @@ export const AuthProvider: FC<PropsWithChildren<AuthProviderProps>> = ({
   }, []);
 
   useEffect(() => {
-    const getUser = async (): Promise<void> => {
+    (async () => {
       // Store current isMounted since this could change while awaiting async operations below
       const isMounted = isMountedRef.current;
 
       /**
        * Check if the user is returning back from OIDC.
        */
       if (hasCodeInUrl(location)) {
-        const user: any = await userManager.signinCallback();
+        const user = await userManager.signinCallback() || null;
         setUserData(user);
         setIsLoading(false);
         onSignIn && onSignIn(user);
@@ -128,9 +128,7 @@ export const AuthProvider: FC<PropsWithChildren<AuthProviderProps>> = ({
         setUserData(user);
         setIsLoading(false);
       }
-      return;
-    };
-    getUser();
+    })();
   }, [location, userManager, autoSignIn, onBeforeSignIn, onSignIn]);
 
   useEffect(() => {
@@ -147,7 +145,7 @@ export const AuthProvider: FC<PropsWithChildren<AuthProviderProps>> = ({
 
   const value = useMemo<AuthContextProps>(() => {
     return {
-      signIn: async (args: any): Promise<void> => {
+      signIn: async (args?: SigninRedirectArgs): Promise<void> => {
         await userManager.signinRedirect(args);
       },
       signInPopup: async (): Promise<void> => {
@@ -157,7 +155,7 @@ export const AuthProvider: FC<PropsWithChildren<AuthProviderProps>> = ({
         await userManager!.removeUser();
         await signOutHooks();
       },
-      signOutRedirect: async (args?: any): Promise<void> => {
+      signOutRedirect: async (args?: SignoutRedirectArgs): Promise<void> => {
         await userManager!.signoutRedirect(args);
         await signOutHooks();
       },
@@ -172,4 +170,4 @@ export const AuthProvider: FC<PropsWithChildren<AuthProviderProps>> = ({
       {children}
     </AuthContext.Provider>
   );
-};
+};

src/AuthContextInterface.ts

@@ -1,4 +1,4 @@
-import {UserManager, User, PopupWindowFeatures} from 'oidc-client-ts';
+import {UserManager, User, PopupWindowFeatures, SigninRedirectArgs, SignoutRedirectArgs} from 'oidc-client-ts';
 export interface Location {
   search: string;
   hash: string;
@@ -124,7 +124,7 @@ export interface AuthContextProps {
   /**
    * Alias for userManager.signInRedirect
    */
-  signIn: (args?: unknown) => Promise<void>;
+  signIn: (args?: SigninRedirectArgs) => Promise<void>;
   /**
    * Alias for userManager.signinPopup
    */
@@ -136,7 +136,7 @@ export interface AuthContextProps {
   /**
    *
    */
-  signOutRedirect: (args?: unknown) => Promise<void>;
+  signOutRedirect: (args?: SignoutRedirectArgs) => Promise<void>;
   /**
    * See [UserManager](https://authts.github.io/oidc-client-ts/classes/UserManager.html) for more details.
    */
@@ -149,4 +149,4 @@ export interface AuthContextProps {
    * Auth state: True until the library has been initialized.
    */
   isLoading: boolean;
-}
+}