Update npm packages

FixJSDOMEnvironment.ts

@@ -0,0 +1,14 @@
+import JSDOMEnvironment from 'jest-environment-jsdom';
+
+// https://github.com/facebook/jest/blob/v29.4.3/website/versioned_docs/version-29.4/Configuration.md#testenvironment-string
+export default class FixJSDOMEnvironment extends JSDOMEnvironment {
+  constructor(...args: ConstructorParameters<typeof JSDOMEnvironment>) {
+    super(...args);
+
+    // FIXME https://github.com/jsdom/jsdom/issues/1724
+    this.global.fetch = fetch;
+    this.global.Headers = Headers;
+    this.global.Request = Request;
+    this.global.Response = Response;
+  }
+}

babel.config.js

@@ -13,10 +13,7 @@ module.exports = {
         // https://github.com/babel/babel/issues/9419
         useBuiltIns: 'usage',
 
-        // FIXME https://github.com/babel/babel/discussions/15264
-        include: ['web.dom-exception.constructor'],
-
-        corejs: '3.29',
+        corejs: '3.30',
 
         debug: false
       }

jest.config.js

@@ -2,7 +2,7 @@
 
 /** @type {import('jest').Config} */
 const config = {
-  testEnvironment: 'jsdom',
+  testEnvironment: './FixJSDOMEnvironment.ts',
 
   // Run once per test file
   // Executed before executing setupFilesAfterEnv and before the test code itself

jest.setup.ts

@@ -1,10 +1,4 @@
 import { throwOnConsole, throwOnFetch, throwOnXMLHttpRequestOpen } from 'throw-on';
-// @ts-ignore
-import { Response as ResponsePolyfill } from 'whatwg-fetch';
-
-// FIXME Fix error "Response is not defined" with Jest 29.3.1 and jsdom 20.0.3
-// https://github.com/jsdom/jsdom/issues/1724#issuecomment-1233478314
-globalThis.Response = ResponsePolyfill;
 
 throwOnConsole('assert');
 throwOnConsole('error');

package.json

@@ -41,39 +41,39 @@
     "count-loc:css": "git ls-files | grep --extended-regexp '\\.s?css$' | xargs wc -l"
   },
   "dependencies": {
-    "@sentry/react": "^7.42.0",
-    "@sentry/tracing": "^7.42.0",
+    "@sentry/react": "^7.54.0",
+    "@sentry/tracing": "^7.54.0",
     "@tkrotoff/fetch": "^0.16.0",
     "blueimp-md5": "^2.19.0",
-    "bootstrap": "^5.2.3",
-    "core-js": "^3.29.0",
+    "bootstrap": "^5.3.0",
+    "core-js": "^3.30.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.8.2",
-    "throw-on": "^0.7.0"
+    "react-router-dom": "^6.11.2",
+    "throw-on": "^0.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@playwright/test": "^1.31.2",
+    "@babel/core": "^7.22.1",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@playwright/test": "^1.34.3",
     "@prettier/plugin-xml": "^2.2.0",
     "@testing-library/react": "^14.0.0",
-    "@tkrotoff/stub-server": "^0.11.0",
+    "@tkrotoff/stub-server": "^0.13.0",
     "@types/blueimp-md5": "^2.18.0",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^29.4.0",
-    "@types/react-dom": "^18.0.11",
+    "@types/jest": "^29.5.2",
+    "@types/react-dom": "^18.2.4",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "babel-loader": "^9.1.2",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "eslint": "^8.35.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.41.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -82,35 +82,33 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-testing-library": "^5.10.2",
-    "eslint-plugin-unicorn": "^46.0.0",
-    "html-webpack-plugin": "^5.5.0",
+    "eslint-plugin-testing-library": "^5.11.0",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "html-webpack-plugin": "^5.5.1",
     "html-webpack-tags-plugin": "^3.0.2",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "lighthouse": "^9.6.8",
-    "lint-staged": "^13.1.2",
-    "mini-css-extract-plugin": "^2.7.3",
+    "lint-staged": "^13.2.2",
+    "mini-css-extract-plugin": "^2.7.6",
     "playwright-lighthouse": "^2.2.2",
-    "postcss-loader": "^7.0.2",
-    "postcss-preset-env": "^8.0.1",
-    "prettier": "^2.8.4",
+    "postcss-loader": "^7.3.2",
+    "postcss-preset-env": "^8.4.2",
+    "prettier": "^2.8.8",
     "purgecss-webpack-plugin": "^5.0.0",
     "react-test-renderer": "^18.2.0",
-    "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-twbs-bootstrap": "^7.0.0",
-    "stylelint-prettier": "^2.0.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.3.1",
+    "style-loader": "^3.3.3",
+    "stylelint": "^15.6.2",
+    "stylelint-config-twbs-bootstrap": "^10.0.0",
+    "stylelint-prettier": "^3.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "webpack": "^5.76.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
-    "whatwg-fetch": "^3.6.2"
+    "typescript": "^5.1.3",
+    "webpack": "^5.85.0",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
   }
 }

src/bootstrap-required.scss

@@ -2,10 +2,11 @@
 // https://getbootstrap.com/docs/5.1/customize/optimize/#lean-sass-imports
 // https://getbootstrap.com/docs/5.1/customize/sass/#remove-from-map
 
-// https://github.com/twbs/bootstrap/blob/v5.2.2/scss/bootstrap.scss#L7-L11
+// https://github.com/twbs/bootstrap/blob/v5.3.0/scss/bootstrap.scss#L7-L12
 
 @import '../node_modules/bootstrap/scss/functions';
 @import '../node_modules/bootstrap/scss/variables';
+@import '../node_modules/bootstrap/scss/variables-dark';
 @import '../node_modules/bootstrap/scss/maps';
 @import '../node_modules/bootstrap/scss/mixins';
 @import '../node_modules/bootstrap/scss/utilities';

stylelint.config.js

@@ -11,7 +11,10 @@ const config = {
     'stylelint-prettier/recommended'
   ],
 
-  rules: {}
+  rules: {
+    // FIXME Already defined in prettier.config.js, why is it not working?
+    'stylistic/string-quotes': 'single'
+  }
 };
 
 module.exports = config;

tsconfig.json

@@ -14,6 +14,9 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true
+
+    // FIXME
+    // node_modules/@jest/environment/build/index.d.ts:401:26 - error TS2430: Interface 'JestImportMeta' incorrectly extends interface 'ImportMeta'.
+    "skipLibCheck": true
   }
 }