mirror of
https://github.com/Mastermindzh/react-starter-kit.git
synced 2025-08-02 15:45:12 +02:00
- Updated to React 18
- Updated for public release - Git was reset for privacy reasons
This commit is contained in:
29
config/jest/babelTransform.js
Normal file
29
config/jest/babelTransform.js
Normal file
@@ -0,0 +1,29 @@
|
||||
"use strict";
|
||||
|
||||
const babelJest = require("babel-jest").default;
|
||||
|
||||
const hasJsxRuntime = (() => {
|
||||
if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
require.resolve("react/jsx-runtime");
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
})();
|
||||
|
||||
module.exports = babelJest.createTransformer({
|
||||
presets: [
|
||||
[
|
||||
require.resolve("babel-preset-react-app"),
|
||||
{
|
||||
runtime: hasJsxRuntime ? "automatic" : "classic",
|
||||
},
|
||||
],
|
||||
],
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
});
|
14
config/jest/cssTransform.js
Normal file
14
config/jest/cssTransform.js
Normal file
@@ -0,0 +1,14 @@
|
||||
"use strict";
|
||||
|
||||
// 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 "module.exports = {};";
|
||||
},
|
||||
getCacheKey() {
|
||||
// The output is always the same.
|
||||
return "cssTransform";
|
||||
},
|
||||
};
|
40
config/jest/fileTransform.js
Normal file
40
config/jest/fileTransform.js
Normal file
@@ -0,0 +1,40 @@
|
||||
"use strict";
|
||||
|
||||
const path = require("path");
|
||||
const camelcase = require("camelcase");
|
||||
|
||||
// This is a custom Jest transformer turning file imports into filenames.
|
||||
// http://facebook.github.io/jest/docs/en/webpack.html
|
||||
|
||||
module.exports = {
|
||||
process(_src, filename) {
|
||||
const assetFilename = JSON.stringify(path.basename(filename));
|
||||
|
||||
if (filename.match(/\.svg$/)) {
|
||||
// Based on how SVGR generates a component name:
|
||||
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
|
||||
const pascalCaseFilename = camelcase(path.parse(filename).name, {
|
||||
pascalCase: true,
|
||||
});
|
||||
const componentName = `Svg${pascalCaseFilename}`;
|
||||
return `const React = require('react');
|
||||
module.exports = {
|
||||
__esModule: true,
|
||||
default: ${assetFilename},
|
||||
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
|
||||
return {
|
||||
$$typeof: Symbol.for('react.element'),
|
||||
type: 'svg',
|
||||
ref: ref,
|
||||
key: null,
|
||||
props: Object.assign({}, props, {
|
||||
children: ${assetFilename}
|
||||
})
|
||||
};
|
||||
}),
|
||||
};`;
|
||||
}
|
||||
|
||||
return `module.exports = ${assetFilename};`;
|
||||
},
|
||||
};
|
Reference in New Issue
Block a user