Jest / Enzyme SVG Sprites意外令牌<

Question

我在使用SVG精灵在组件上使用Jest和Enzyme创建快照测试时遇到问题。

我正在使用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;

这是开玩笑的错误：

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

Answer 1

之所以发生此问题，是因为jest无法解决我认为在您的项目中由Webpack处理的SVG导入。

经过一番阅读，我遇到了以下软件包，该软件包专门用于测试此类导入。

安装此软件包：

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

将您的moduleNameMapper更新jest.config为以下内容：

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