Jest/Enzyme SVG Sprites 意外令牌 <答案

【问题标题】：Jest/Enzyme SVG Sprites Unexpected Token <Jest/Enzyme SVG Sprites 意外令牌 <
【发布时间】：2019-02-28 02:29:26
【问题描述】：

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

【问题讨论】：

标签： reactjs svg jestjs enzyme svg-sprite

【解决方案1】：

出现这个问题是因为 jest 无法解析 SVG 导入，我认为在您的项目中它是由 webpack 处理的。

经过一番阅读，我发现了以下专门用于测试此类导入的包。

安装这个包：

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

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

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

【讨论】：

按照您的建议安装 identity-obj-proxy 并更新 jest 配置后，我现在收到错误：console.error node_modules/fbjs/lib/warning.js:33 警告：React.createElement : 类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。
(svg|png|jpg|) 更改为 (svg|png|jpg) 并检查一次。很多人都在使用 identify-obj-proxy 来解析 svg 导入，并且都说它工作正常。
不幸的是，在进行更改后仍然出现上述错误。
@DeanN 你明白了吗？

【解决方案2】：

我正在为应用程序使用 Create React App。

最后，这个选项对我来说可以导入 svgs，在 package.json 中提供以下选项：

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

安装 jest-transform-stub 模块。

【讨论】：