diff --git a/packages/cli/config/jest.js b/packages/cli/config/jest.js index ad24976ad0..80e0bcf26c 100644 --- a/packages/cli/config/jest.js +++ b/packages/cli/config/jest.js @@ -38,11 +38,16 @@ async function getConfig() { transform: { '\\.esm\\.js$': require.resolve('jest-esm-transformer'), '\\.(js|jsx|ts|tsx)': require.resolve('ts-jest'), + '\\.(bmp|gif|jpe|png|frag|xml|svg)': require.resolve( + './jestFileTransform.js', + ), }, // Default behaviour is to not apply transforms for node_modules, but we still want // to apply the esm-transformer to .esm.js files, since that's what we use in backstage packages. - transformIgnorePatterns: ['/node_modules/(?!.*\\.esm\\.js$)'], + transformIgnorePatterns: [ + '/node_modules/(?!.*\\.(?:esm\\.js|bmp|gif|jpe|png|frag|xml|svg)$)', + ], }; // Use src/setupTests.ts as the default location for configuring test env diff --git a/packages/cli/config/jestFileTransform.js b/packages/cli/config/jestFileTransform.js new file mode 100644 index 0000000000..e6ff1895f8 --- /dev/null +++ b/packages/cli/config/jestFileTransform.js @@ -0,0 +1,42 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +const path = require('path'); + +module.exports = { + process(src, filename) { + const assetFilename = JSON.stringify(path.basename(filename)); + + if (filename.match(/\.icon\.svg$/)) { + return `const React = require('react'); + const SvgIcon = require('@material-ui/core/SvgIcon').default; + module.exports = { + __esModule: true, + default: props => React.createElement(SvgIcon, props, { + $$typeof: Symbol.for('react.element'), + type: 'svg', + ref: ref, + key: null, + props: Object.assign({}, props, { + children: ${assetFilename} + }) + }) + };`; + } + + return `module.exports = ${assetFilename};`; + }, +};