svgr VS ts-jest

// config/jest/fileTransform.js "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};`; }, };

use ts-jest and set up Paths Re-Map

Jest's out of the box config for TS doesn't do any type checking. You can integrate https://kulshekhar.github.io/ts-jest/ or you can call ‘tsc’ yourself separately

ts-jest has had some strange performance issues and workarounds in the past, though I haven’t used it very recently so it might have fixed those by now.

Since we're working with TypeScript, we can use ts-jest, which conveniently brings Jest along for the ride:

I want to save you from manually copying the snippets one by one, so here is a Gist with the complete test file. This can be easily executed with Jest (or ts-jest for TypeScript).

See the Jest configuration docs to learn more about Jest configuration. ts-jest also has good documentation.

Using @swc/jest to compile code to CommonJS is much faster than babel-jest, ts-jest which have long cold starts when executing tests in a large project.

ts-jest: A transformer for handling TypeScript files.

Anyway, I ran into this exact error this morning setting up Jest for a TS script. I fixed it by just following the getting started instructions for Jest as well as ts-jest.