Неожиданный токен Jest / Enzyme SVG Sprites <
У меня возникла проблема с созданием теста моментального снимка с 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)
Я пытался следовать руководству Jest о том, как обрабатывать статические активы следующим образом:
// 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
Ответы 2
Эта проблема возникает из-за того, что jest не может разрешить импорт SVG, который, как я думаю, в ваших проектах обрабатывается веб-пакетом.
После небольшого чтения я наткнулся на следующий пакет, специально предназначенный для тестирования такого импорта.
Установите этот пакет:
npm install --save-dev identity-obj-proxy
Обновите свой moduleNameMapper в jest.config до следующего:
moduleNameMapper: {
".+\\.(svg|png|jpg)$": "identity-obj-proxy"
}
(svg | png | jpg |) измените на (svg | png | jpg) и проверьте один раз. Многие люди используют identify-obj-proxy для разрешения импорта svg, и все говорят, что он работает нормально.
К сожалению, после внесения этого изменения он по-прежнему дает указанную выше ошибку.
@DeanN ты догадалась?
Я использую приложение 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.
после установки identity-obj-proxy и обновления конфигурации jest, как вы предложили, теперь я получаю сообщение об ошибке: console.error node_modules / fbjs / lib / warning.js: 33 Предупреждение: React.createElement: тип недействителен - ожидался строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен.