Check types using ts-jest and upgrade Jest (#1178)

.github/dependabot.yml

@@ -6,11 +6,5 @@ updates:
   schedule:
     interval: weekly
   ignore:
-    - dependency-name: jest
-      update-types: ["version-update:semver-major"]
-    - dependency-name: "@types/jest"
-      update-types: ["version-update:semver-major"]
-    - dependency-name: ts-jest
-      update-types: ["version-update:semver-major"]
     - dependency-name: react-hook-form
       update-types: ["version-update:semver-major"]

jest.config.ts

@@ -1,15 +1,16 @@
-// See: https://github.com/snowpackjs/snowpack/issues/3242
-// @ts-ignore
-import snowpackConfig from "@snowpack/app-scripts-react/jest.config.js";
-import type { Config } from "@jest/types";
+import type { InitialOptionsTsJest } from "ts-jest/dist/types";
 
-const config: Config.InitialOptions = {
-  ...snowpackConfig(),
+const config: InitialOptionsTsJest = {
+  preset: "ts-jest",
+  globals: {
+    "ts-jest": {
+      tsconfig: "tsconfig.jest.json",
+    },
+  },
+  testMatch: ["<rootDir>/src/**/*.test.ts?(x)"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
-      "<rootDir>/mocks/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/mocks/styleMock.js",
+    "\\.css$": "<rootDir>/mocks/fileMock.ts",
   },
 };
 

jest.setup.ts

@@ -2,8 +2,6 @@ import "@testing-library/jest-dom";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
-import "mutationobserver-shim";
-
 i18n.use(initReactI18next).init({
   lng: "en",
   fallbackLng: "en",
@@ -14,7 +12,3 @@ i18n.use(initReactI18next).init({
 
   resources: { en: { translations: {} } },
 });
-
-// eslint-disable-next-line no-undef
-// @ts-ignore
-global.MutationObserver = window.MutationObserver;

mocks/fileMock.js

@@ -1 +0,0 @@
-module.exports = "test-file-stub";

mocks/fileMock.ts

@@ -0,0 +1 @@
+export default "test-file-stub";

mocks/styleMock.js

@@ -1 +0,0 @@
-module.exports = {};

package.json

@@ -54,7 +54,6 @@
     "@testing-library/react": "^12.1.0",
     "@types/dagre": "^0.7.45",
     "@types/file-saver": "^2.0.3",
-    "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.173",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
@@ -72,16 +71,15 @@
     "eslint-plugin-react": "^7.25.1",
     "http2-proxy": "^5.0.53",
     "husky": "^7.0.2",
-    "jest": "^26.6.3",
+    "jest": "^27.2.0",
     "lint-staged": "^11.1.2",
-    "mutationobserver-shim": "^0.3.7",
     "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
     "prettier": "^2.4.1",
     "snowpack": "^3.8.2",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.0.5",
     "ts-node": "^10.2.1",
-    "typescript": "4.4.3"
+    "typescript": "^4.4.3"
   },
   "lint-staged": {
     "*.{js,jsx,mjs,ts,tsx}": "eslint --cache --fix"

src/client-scopes/add/MapperDialog.test.tsx

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import { Button } from "@patternfly/react-core";
 import { fireEvent, render, screen } from "@testing-library/react";
 import type { ServerInfoRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";

src/components/confirm-dialog/ConfirmDialog.test.tsx

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import { fireEvent, screen, render } from "@testing-library/react";
 import React from "react";
 import { useConfirmDialog } from "./ConfirmDialog";

src/components/data-loader/DataLoader.test.tsx

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import { render, waitFor } from "@testing-library/react";
 import type KeycloakAdminClient from "@keycloak/keycloak-admin-client";
 import type { ServerInfoRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";

src/components/form-access/FormAccess.test.tsx

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
 import { render, screen } from "@testing-library/react";
 import type WhoAmIRepresentation from "@keycloak/keycloak-admin-client/lib/defs/whoAmIRepresentation";

src/context/whoami/__tests__/WhoAmI.test.ts

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import whoamiMock from "./mock-whoami.json";
 import { WhoAmI } from "../WhoAmI";
 import type WhoAmIRepresentation from "@keycloak/keycloak-admin-client/lib/defs/whoAmIRepresentation";

tsconfig.jest.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}