fileTransform.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. 'use strict';
  2. const path = require('path');
  3. const camelcase = require('camelcase');
  4. // This is a custom Jest transformer turning file imports into filenames.
  5. // http://facebook.github.io/jest/docs/en/webpack.html
  6. module.exports = {
  7. process(src, filename) {
  8. const assetFilename = JSON.stringify(path.basename(filename));
  9. if (filename.match(/\.svg$/)) {
  10. // Based on how SVGR generates a component name:
  11. // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
  12. const pascalCaseFilename = camelcase(path.parse(filename).name, {
  13. pascalCase: true,
  14. });
  15. const componentName = `Svg${pascalCaseFilename}`;
  16. return `const React = require('react');
  17. module.exports = {
  18. __esModule: true,
  19. default: ${assetFilename},
  20. ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
  21. return {
  22. $$typeof: Symbol.for('react.element'),
  23. type: 'svg',
  24. ref: ref,
  25. key: null,
  26. props: Object.assign({}, props, {
  27. children: ${assetFilename}
  28. })
  29. };
  30. }),
  31. };`;
  32. }
  33. return `module.exports = ${assetFilename};`;
  34. },
  35. };