Merge branch 'next-jest' into 'next'

Next: Upgrade Jest to v27.5, remove jest-transform-stub, add a custom transformer

See merge request soapbox-pub/soapbox-fe!1185

app/soapbox/components/verification_badge.tsx

@@ -1,10 +1,9 @@
 import classNames from 'classnames';
-import { Map as ImmutableMap } from 'immutable';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { useSelector } from 'react-redux';
 
 import Icon from 'soapbox/components/ui/icon/icon';
+import { useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
   verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
@@ -14,12 +13,12 @@ interface IVerificationBadge {
   className?: string,
 }
 
-const VerificationBadge = ({ className }: IVerificationBadge) => {
+const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const intl = useIntl();
+  const soapboxConfig = useSoapboxConfig();
 
   // Prefer a custom icon if found
-  const customIcon = useSelector((state: ImmutableMap<string, any>) => state.getIn(['soapbox', 'verifiedIcon']));
-  const icon = customIcon || require('icons/verified.svg');
+  const icon = soapboxConfig.verifiedIcon || require('icons/verified.svg');
 
   // Render component based on file extension
   const Element = icon.endsWith('.svg') ? Icon : 'img';

jest.config.js

@@ -1,3 +1,5 @@
+const ASSET_EXTS = 'css|styl|less|sass|scss|png|jpg|svg|ogg|oga|mp3|ttf|woff|woff2';
+
 module.exports = {
   'testPathIgnorePatterns': [
     '<rootDir>/node_modules/',
@@ -32,11 +34,12 @@ module.exports = {
   ],
   'testMatch': ['**/*/__tests__/**/?(*.|*-)+(test).(ts|js)?(x)'],
   'testEnvironment': 'jsdom',
-  'moduleNameMapper': {
-    '^.+.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$': 'jest-transform-stub',
-  },
+  'transformIgnorePatterns': [
+    // Ignore node_modules, except static assets
+    `/node_modules/(?!.+\\.(${ASSET_EXTS}))`,
+  ],
   'transform': {
     '\\.[jt]sx?$': 'babel-jest',
-    '.+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$': 'jest-transform-stub',
+    [`.+\\.(${ASSET_EXTS})$`]: '<rootDir>/jest/assetTransformer.js',
   },
 };

jest/assetTransformer.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+// Custom Jest asset transformer
+// https://jestjs.io/docs/code-transformation#writing-custom-transformers
+// Tries to do basically what Webpack does
+module.exports = {
+  process(src, filename, config, options) {
+    return `module.exports = "https://soapbox.test/assets/${path.basename(filename)}";`;
+  },
+};

package.json

@@ -21,7 +21,7 @@
     "build": "npx webpack",
     "jsdoc": "npx jsdoc -c jsdoc.conf.js",
     "manage:translations": "node ./webpack/translationRunner.js",
-    "test": "npx jest",
+    "test": "npx cross-env NODE_ENV=test npx jest",
     "test:coverage": "npx jest --coverage",
     "test:all": "${npm_execpath} run test:coverage && ${npm_execpath} run lint",
     "lint": "${npm_execpath} run lint:js && ${npm_execpath} run lint:sass",
@@ -125,7 +125,6 @@
     "intl-messageformat-parser": "^6.0.0",
     "intl-pluralrules": "^1.3.0",
     "is-nan": "^1.2.1",
-    "jest-transform-stub": "^2.0.0",
     "jsdoc": "~3.6.7",
     "line-awesome": "^1.3.0",
     "localforage": "^1.10.0",
@@ -195,12 +194,13 @@
     "wicg-inert": "^3.1.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/user-event": "^14.0.3",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.1.0",
+    "babel-jest": "^27.5.1",
+    "cross-env": "^7.0.3",
     "eslint": "^7.0.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
@@ -208,7 +208,7 @@
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^7.0.2",
-    "jest": "^27.1.0",
+    "jest": "^27.5.1",
     "lint-staged": ">=10",
     "raf": "^3.4.1",
     "react-intl-translations-manager": "^5.0.3",
@@ -217,7 +217,7 @@
     "stylelint-config-standard": "^22.0.0",
     "stylelint-scss": "^3.18.0",
     "tailwindcss": "^3.0.15",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^27.1.4",
     "webpack-dev-server": "^4.1.0",
     "yargs": "^16.0.3"
   }