Jest/Enzyme SVG Sprites Неожиданный токен <

Question

У меня возникла проблема при создании теста моментального снимка с помощью Jest и Enzyme для компонента с использованием SVG-спрайтов.

Я использую пакет svg-sprite-loader: https://github.com/kisenka/svg-sprite-loader

Вот компонент, который создает проблемы:

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;

Вот ошибка Jest:

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)

Я попытался следовать указаниям Джеста о том, как обрабатывать статические активы, например так:

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

Наконец, вот ссылка на GitHub моего проекта: https://github.com/deannellis/tabletop

Answer 1

Эта проблема возникает из-за того, что jest не может разрешить импорт SVG, который, я думаю, в ваших проектах обрабатывается веб-пакетом.

Немного почитав, я наткнулся на следующий пакет, специально предназначенный для тестирования такого импорта.

Установите этот пакет и обновите свой moduleNameMapper в конфигурации jest до следующего.

npm install --save identity-obj-proxy

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

Answer 2

Я использую приложение Create React для приложения.

Наконец, этот вариант сработал для меня для импорта svgs, представленного ниже в package.json:

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

установить модуль jest-transform-stub.