Jest cannot load svg file

Question

In my app I use React and TypeScript. I tried to run jest tests I get following error:

C:\Users\e-KDKK\workspace\konrad\mikskarpety\src\images\icons\Sock.svg:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" width="18.725" height="23.947" viewBox="0 0 18.725 23.947">                                                                                          ^  SyntaxError: Unexpected token <    1 | import React, { FC } from 'react';   2 |  > 3 | import SockIcon from '../../images/icons/Sock.svg';     | ^   4 |    5 | export const Spinner: FC = () => {   6 |   return (    at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)   at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)   at Object.<anonymous> (src/components/Spinner/Spinner.tsx:3:1) 

This file is not even tested. I don't know why it tries to compile it. My jest.config.json file contains only coverage thresholds.

I read that jest sometimes needs additional transform section for specific files like SVG, but when I added to configuration

"transform": {     "^.+\\.svg$": "jest-svg-transformer" }, 

my error message changed only to:

C:\Users\e-KDKK\workspace\konrad\mikskarpety\test\utils\debounce.test.ts:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { getVersion } from 'jest'; ^

SyntaxError: Unexpected token {    at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)   at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25) 

Which is even more confusing to me.

The code for the app you can find here: https://github.com/KonradKlimczak/mikskarpety

Answer 1

jest doesn't know how to load other file extensions than js/jsx,you need to find the jest.config.js and add transformer for svg files.

"transform": {    "^.+\\.tsx?$": "ts-jest",    "^.+\\.svg$": "<rootDir>/svgTransform.js" }, 

and create the svgTransform.js file (see Custom transformers) in your root directory with the following content.

module.exports = {     process() {         return 'module.exports = {};';     },     getCacheKey() {         // The output is always the same.         return 'svgTransform';     }, }; 

link:https://jestjs.io/docs/en/configuration.html#transform-object-string-string

Answer 2

Another easier option to solve this problem is jest-svg-transformer.

Just install it: npm i -D jest-svg-transformer or yarn add -D jest-svg-transformer

And add to the jest.config.js to the transform's section:

"transform": {    ...    "^.+\\.svg$": "jest-svg-transformer" }