Jest/Enzyme SVG Sprites Unexpected Token <

Question

I am having a problem creating a snapshot test with Jest and Enzyme on a component using SVG sprites.

I am using the package svg-sprite-loader: https://github.com/kisenka/svg-sprite-loader

Here is the component that's giving it trouble:

import React from 'react';
import dieIcons from '../../public/images/dieIcons.svg';

const DieIcon = (props) => (
<svg className={`die__icon icon-${props.name}`} onMouseDown={props.onMouseDown} onMouseUp={props.onMouseUp} onMouseOut={props.onMouseOut}>
   <use xlinkHref={`#dieIcons_${props.name}`} />
</svg>);

export default DieIcon;

Here is the Jest error:

Test suite failed to run

/home/ubuntu/workspace/tabletop-app/public/images/dieIcons.svg:2
<svg style="display:none;">
^

SyntaxError: Unexpected token <

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
  at Object.<anonymous> (src/components/DieIcon.js:2:17)
  at Object.<anonymous> (src/components/SingleRollDie.js:2:16)

I have tried to follow Jest's guidance on how to handle static assets like so:

// in package.json
"jest": {
    "moduleNameMapper": {
      "modulePaths": ["/shared/vendor/modules"],
      "moduleFileExtensions": ["js", "jsx"],
      "moduleDirectories": ["node_modules", "bower_components", "shared"],
      "\\.(svg)$": "<rootDir>/src/tests/__mocks__/fileMock.js"
    }
}

Lastly here is a link to my project's GitHub:https://github.com/deannellis/tabletop

score 12 · Answer 1 · edited Dec 14 '18 at 13:18

12

This issue is happening because jest is not able to resolve SVG imports which I think in your projects are handled by webpack.

After a bit of reading, I came across the following package which is specifically meant for testing such imports.

Install this package:

npm install --save-dev identity-obj-proxy

Update your moduleNameMapper within jest.config to following:

moduleNameMapper: {
  ".+\\.(svg|png|jpg)$": "identity-obj-proxy"
}

edited Dec 14 '18 at 13:18

Paweł Skorupiński

491
4
16

answered Sep 24 '18 at 15:26

Shubham Gupta

2,596
1
8
19

1

after installing identity-obj-proxy and updating the jest config as you suggested, I am now getting the error: console.error node_modules/fbjs/lib/warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. – Dean N Sep 24 '18 at 20:25
(svg|png|jpg|) change to (svg|png|jpg) and check once. Whole lot of people are using identify-obj-proxy for resolving svg imports and all say it works fine. – Shubham Gupta Sep 24 '18 at 20:39
2

Unfortunately it is still give the error above after making that change. – Dean N Sep 24 '18 at 20:54
@DeanN have you figured it out? – OlehZiniak Mar 14 '20 at 21:45

score 1 · Answer 2 · answered Jun 07 '20 at 04:44

I am using Create React App for the application.

Finally this option worked for me for importing svgs, provided below option in package.json:

"jest": {
    "transform": {
      "^.+\\.[jt]sx?$": "babel-jest",
      "^.+\\.svg$": "jest-transform-stub"
    },
      "moduleNameMapper": {
          "^.+.(svg|png|jpg)$": "jest-transform-stub"
      }
  },

install jest-transform-stub module.

Jest/Enzyme SVG Sprites Unexpected Token <

2 Answers2

Linked