Merge pull request #632 from acelaya-forks/feature/jest-28

Feature/jest 28

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#616](https://github.com/shlinkio/shlink-web-client/pull/616) Updated to React 18.
 * [#595](https://github.com/shlinkio/shlink-web-client/pull/595) Updated to react-chartjs-2 v4.1.0.
 * [#594](https://github.com/shlinkio/shlink-web-client/pull/594) Updated to a new coding standard.
+* [#627](https://github.com/shlinkio/shlink-web-client/pull/627) Updated to Jest 28.
 * [#603](https://github.com/shlinkio/shlink-web-client/pull/603) Migrated to new and maintained dependencies to parse CSV<->JSON.
 * [#619](https://github.com/shlinkio/shlink-web-client/pull/619) Introduced react testing library, to progressively replace enzyme.
 

config/jest/cssTransform.js

@@ -0,0 +1,12 @@
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return { code: 'module.exports = {};' };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

config/jest/fileTransform.js

@@ -24,6 +24,8 @@ module.exports = {
       };`;
     }
 
-    return `module.exports = ${assetFilename};`;
+    return {
+      code: `module.exports = ${assetFilename};`
+    };
   },
 };

config/jest/setupBeforeEnzyme.js

@@ -0,0 +1,4 @@
+import * as util from 'util';
+
+global.TextEncoder = util.TextEncoder;
+global.TextDecoder = util.TextDecoder;

jest.config.js

@@ -15,25 +15,27 @@ module.exports = {
       lines: 85,
     },
   },
-  setupFiles: ['<rootDir>/config/jest/setupEnzyme.js'],
+  setupFiles: ['<rootDir>/config/jest/setupBeforeEnzyme.js', '<rootDir>/config/jest/setupEnzyme.js'],
   setupFilesAfterEnv: ['<rootDir>/config/jest/setupTests.ts'],
   testMatch: ['<rootDir>/test/**/*.test.{ts,tsx}'],
   testEnvironment: 'jsdom',
-  testURL: 'http://localhost',
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
   transform: {
     '^.+\\.(ts|tsx|js)$': '<rootDir>/node_modules/babel-jest',
-    '^(?!.*\\.(ts|tsx|js|json)$)': '<rootDir>/config/jest/fileTransform.js',
+    '^.+\\.scss$': '<rootDir>/config/jest/cssTransform.js',
+    '^(?!.*\\.(ts|tsx|js|json|scss)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   transformIgnorePatterns: [
     '<rootDir>/.stryker-tmp',
-    'node_modules\/(?!(\@react-leaflet|react-leaflet|leaflet|react-chartjs-2)\/)',
+    'node_modules\/(?!(\@react-leaflet|react-leaflet|leaflet|react-chartjs-2|react-colorful)\/)',
     '^.+\\.module\\.scss$',
   ],
   moduleNameMapper: {
     '^.+\\.module\\.scss$': 'identity-obj-proxy',
-    // Reactstrap module resolution does not work in jest for some reason. Manually mapping it solves the problem
-    'reactstrap': '<rootDir>/node_modules/reactstrap/dist/reactstrap.umd.js',
     'react-chartjs-2': '<rootDir>/node_modules/react-chartjs-2/dist/index.js',
+    'uuid': '<rootDir>/node_modules/uuid/dist/index.js',
   },
   moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
 };

package.json

@@ -89,15 +89,16 @@
     "@types/uuid": "^8.3.4",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
     "adm-zip": "^0.5.9",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "^28.0.3",
     "chalk": "^5.0.1",
     "dart-sass": "^1.25.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.12.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
+    "jest": "^28.0.3",
     "jest-canvas-mock": "^2.4.0",
-    "react-scripts": "^5.0.0",
+    "jest-environment-jsdom": "^28.0.2",
+    "react-scripts": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.49.9",
     "serve": "^13.0.2",