Jest: SVG require causes “SyntaxError: Unexpected token

Jest doesn’t use Webpack so it doesn’t know how to load other file extensions than js/jsx. To add support for other extensions you need to write custom transformers. One of the transformers is a Typescript transformer which you have defined in your configuration in this fragment:

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

Now you need to add transformer for svg files. Let’s extend your jest config

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

and create the svgTransform.js file in your root directory with the following content

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

Of course, it’s a basic transformer that returns always the same value.

Link to the documentation: http://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string

If you have used the @svgr/webpack module to allow webpack to handle importing svgs @svgr provides a page that goes over how to handle testing with Jest. Here

Copied for posterity.

/__mocks__/svgrMock.js

import * as React from 'react'
export default 'SvgrURL'
export const ReactComponent="div"

In package.json

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}