@ornikar/jest-config-react 9.4.1 → 9.6.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.6.0](https://github.com/ornikar/shared-configs/compare/@ornikar/jest-config-react@9.5.1...@ornikar/jest-config-react@9.6.0) (2022-04-01)
+
+
+### Features
+
+* **jest-config-react:** improve svg transformer [no issue] ([#688](https://github.com/ornikar/shared-configs/issues/688)) ([d353d0e](https://github.com/ornikar/shared-configs/commit/d353d0e5151a3e0b790fc5805bc73bf9350efd68))
+
+
+
+
+
+## [9.5.1](https://github.com/ornikar/shared-configs/compare/@ornikar/jest-config-react@9.5.0...@ornikar/jest-config-react@9.5.1) (2022-03-29)
+
+
+### Bug Fixes
+
+* **jest-config-react:** add missing escape dot in raw.svg transform ([41491df](https://github.com/ornikar/shared-configs/commit/41491dfe6fab643fe47a35634e6abad32f11a2d1))
+
+
+
+
+
+# [9.5.0](https://github.com/ornikar/shared-configs/compare/@ornikar/jest-config-react@9.4.1...@ornikar/jest-config-react@9.5.0) (2022-03-29)
+
+
+### Features
+
+* **jest-config-react:** use jest-svg-transformer ARCH-1506 ([#678](https://github.com/ornikar/shared-configs/issues/678)) ([0507f23](https://github.com/ornikar/shared-configs/commit/0507f23eb3938a1320e457c847dbc576316e3e7f))
+
+
+
+
+
 ## [9.4.1](https://github.com/ornikar/shared-configs/compare/@ornikar/jest-config-react@9.4.0...@ornikar/jest-config-react@9.4.1) (2022-03-14)
 
 **Note:** Version bump only for package @ornikar/jest-config-react

package/jest-preset.js

@@ -18,14 +18,17 @@ module.exports = {
     require.resolve('./test-setup'),
     baseJestPreset.setupFiles[baseJestPreset.setupFiles.length - 1],
   ],
-  transform: useCraco
-    ? {
-        '\\.svg$': require.resolve('./fileTransform'),
-      }
-    : {
-        '\\.svg$': require.resolve('./fileTransform'),
-        '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
-      },
+  transform: {
+    '\\.raw\\.svg$': require.resolve('./transformers/asset-name-transformer'),
+    // legacy support, use { ReactComponent } from .svg instead.
+    '\\.inline\\.svg$': require.resolve('./transformers/svg-transformer-inline.js'),
+    '\\.svg$': require.resolve('./transformers/svg-transformer.js'),
+    ...(useCraco
+      ? {}
+      : {
+          '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+        }),
+  },
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$', '^.+\\.css$'],
   moduleNameMapper: {
     '\\.css$': 'identity-obj-proxy',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/jest-config-react",
-  "version": "9.4.1",
+  "version": "9.6.0",
   "description": "✅⚛️ jest config for react",
   "repository": "ornikar/shared-configs",
   "main": "jest-preset.js",
@@ -29,5 +29,5 @@
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
-  "gitHead": "e8854060fac2ebe723af742f806c3c1cc1253748"
+  "gitHead": "da7e24d3f68f523b77aca25578d444d101f4dae7"
 }

package/{fileTransform.js → transformers/asset-name-transformer.js}

@@ -3,8 +3,8 @@
 const path = require('path');
 
 module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
+  process(src, filePath) {
+    const assetFilename = JSON.stringify(path.basename(filePath));
     return `module.exports = ${assetFilename};`;
   },
 };

package/transformers/svg-transformer-inline.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const path = require('path');
+
+exports.process = function process(src, filePath) {
+  const assetFilename = JSON.stringify(path.basename(filePath));
+  return `
+const { jsx } = require('react/jsx-runtime');
+function JestSvgComponent(props) {
+return jsx(
+  'svg',
+  Object.assign({}, props, {'data-file-name': ${assetFilename}})
+);
+}
+module.exports = JestSvgComponent;
+          `;
+};

package/transformers/svg-transformer.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const path = require('path');
+const { process } = require('./svg-transformer-inline');
+
+exports.process = (src, filePath) => {
+  const assetFilename = JSON.stringify(path.basename(filePath));
+  const content = process(src, filePath);
+  return content.replace(
+    /module.exports = (.*);/,
+    `module.exports = new Proxy({}, {
+    get: function getter(target, key) {
+      if (key === '__esModule') {
+        return true;
+      }
+      if (key === 'default') {
+        return ${assetFilename};
+      }
+      if (key === 'ReactComponent') {
+        return $1;
+      }
+      throw new Error('Invalid key for svg-transformer jest mock: ' + key);
+    }
+  });`,
+  );
+};