Jest:SVG需要导致“语法错误:意外的标记〈”

pdtvr36n  于 2022-12-08  发布在  Jest
关注(0)|答案(4)|浏览(268)

不确定在何处查找此错误。
将Typescript与React、Jest和Enzyme一起用于单元测试。
Package.json示例:

"scripts": {
    "start": "node server.js",
    "bundle": "cross-env NODE_ENV=production webpack -p",
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

运行npm测试的结果:

FAIL src/components/Component.test.tsx

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                             ^

    SyntaxError: Unexpected token <

编辑:当我第一次使用require加载一个静态的.svg文件时,这个错误就出现了。为什么它不能处理这个问题?有没有办法在使用require时忽略这个错误?

uqjltbpv

uqjltbpv1#

Jest不使用Webpack,所以它不知道如何加载除js/jsx以外的其他文件扩展名。要添加对其他扩展名的支持,您需要编写自定义转换器。其中一个转换器是您在配置中定义的Typescript转换器,如以下片段所示:

"transform": {
   "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},

现在需要为svg文件添加transformer。

"transform": {
       "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
       "^.+\\.svg$": "<rootDir>/svgTransform.js" 
    },

并在根目录中创建svgTransform.js文件,其中包含以下内容

module.exports = {
  process() {
    return { code: 'module.exports = {};' };
  },
  getCacheKey() {
    // The output is always the same.
    return 'svgTransform';
  },
};

当然,它是一个基本的转换器,总是返回相同的值。
文档链接:http://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string

gzjq41n4

gzjq41n42#

如果您已经使用了@svgr/webpack模块来允许webpack处理svgs的导入,@svgr会提供一个页面,介绍如何使用Jest处理测试。Here
为后人抄录。
/__mocks__/svgrMock.js

import * as React from 'react'
export default 'SvgrURL'
export const ReactComponent = 'div'

单位:package.json

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}
m2xkgtsf

m2xkgtsf3#

您可以使用npm包jest-transform-stub
在Jest配置文件中,添加如下转换:

"transform": {
  ...
  "^.+\\.svg$": "jest-transform-stub",
  ...
}

Same transform can be use for any asset file.
  ".+\\.(css|less|sass|scss|png|jpg|gif|ttf|woff|woff2|svg)$": "jest-transform-stub",
t3psigkw

t3psigkw4#

1.使用类似于以下__mocks__/svgMock.js文件的内容模拟SVG:

import React from "react";
export default "SvgURL";
export const ReactComponent = ({ width, height }) => (
  <div>
    w-{width} h-{height}
  </div>
);

1.通过使用以下属性修改jest.config.js来告诉Jest在哪里可以找到这个SVG模拟器:

moduleNameMapper: {
    "\\.svg": "<rootDir>/__mocks__/svgMock.js",
  },

相关问题