Jest: SVG require causes “SyntaxError: Unexpected token <"

Not sure where to look for this error.

Using Typescript with React, and Jest and Enzyme for unit testing.

Package.json sample:

"scripts": {
    "start": "node server.js",
    "bundle": "cross-env NODE_ENV=production webpack -p",
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

Running npm test results in:
FAIL src/components/Component.test.tsx

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                             ^

    SyntaxError: Unexpected token <

Edit: It appears to be happening the first place where i use require to load a static .svg file. Why can it not handle that? Is there a way to ignore throwing this error when using require?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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"
  }
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x