Closed cyrus-za closed 3 years ago
Actually, jest misses a lot of other loaders' support. Here is my modified jest.config.js in each app/lib dir:
module.exports = {
displayName: 'core',
preset: '../../jest.preset.js',
transform: {
'^.+\\.[tj]sx?$': [
'babel-jest',
{ cwd: __dirname, configFile: './babel-jest.config.json' },
],
'.+\\.(png|jpg|gif|ttf|woff|woff2|mp4)$': '<rootDir>/../../jest/stub.js',
'^.+\\.(css|less|scss|sass)$': '<rootDir>/../../jest/stub.js',
'^.+\\.svg$': '<rootDir>/../../jest/svgTransformer.js',
},
moduleNameMapper: {
'^.+\\.(css|less|sass|scss)$': '<rootDir>/../../jest/fileMock.js',
'^.+\\.(png|jpg|gif|ttf|woff|woff2|mp4)$':
'<rootDir>/../../jest/fileMock.js',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx']
};
<rootDir>/jest/stub.js
:
module.exports = {
process: function () {
return {
code: 'module.exports = ""',
};
},
};
<rootDir>/jest/svgTransformer.js
:
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};`;
},
};
<rootDir>/jest/fileMock.js
:
module.exports = '';
Hope it will help 🙏️
Thanks @quolpr but we got a lot of libs. Not ideal to need to manually modify each of them and to try and get everyone in the team to remember to manually change it when creating a new lib. Best to have it as part of nx, or to have some script in tools/scripts dir
If nx team doesn't respond soon, I'll probably end up making a script for it
This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏
This is still an isssue...
@vsavkin Can you please reopen it?
Actually, jest misses a lot of other loaders' support. Here is my modified jest.config.js in each app/lib dir: ..... Hope it will help 🙏️
this worked for me although this should be default behaviour from NX
there is svgr (and also font) support it seems in the gatsby jest setup, but not for default react libs. Would be nice to have an overview in the docs of what is supported where (with webpack, jest, rollup, babel) and what is the best way to customize without overriding defaults. Now the only way is to look at the source files of the nx presets.
For those who interested in workaround:
1) edit root jest.preset.js
module.exports = {
...nxPreset,
moduleNameMapper: {
'\\.svg': '<rootDir>/../../testing/svgrMock.js'
}
};
Please note two /.. after root dir. Due to https://github.com/nrwl/nx/issues/8029 all libs folders are using their src as rootDir
2) add module.exports = { ReactComponent: 'IconMock' }
@Lonli-Lokli I've tried your approach and still cannot get around the error:
// error TS2307: Cannot find module './brand-icon.svg' or its corresponding type declarations.
import { ReactComponent as BrandIcon} from './brand-icon.svg';
I've answered in linked topic.
This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.
Current Behavior
@nrwl/next/plugins/with-nx
allows us to usesvgr
to import svg's. When running unit tests on components (inside libs), however, this does not go via next.config.js so we need to manually setup jest to handle svgr for each and every library's jest.config.jsExpected Behavior
I expect some sort of jest config baked into the generator
Steps to Reproduce
nx g @nrwl/react:lib myLib
libs/my-lib/assets/my-svg.svg
my-lib.tsx
file and import the svgnx myLib:test
and see how jest falls overFailure Logs
Environment