不确定在何处查找此错误。
将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时忽略这个错误?
4条答案
按热度按时间uqjltbpv1#
Jest不使用Webpack,所以它不知道如何加载除js/jsx以外的其他文件扩展名。要添加对其他扩展名的支持,您需要编写自定义转换器。其中一个转换器是您在配置中定义的Typescript转换器,如以下片段所示:
现在需要为svg文件添加transformer。
并在根目录中创建svgTransform.js文件,其中包含以下内容
当然,它是一个基本的转换器,总是返回相同的值。
文档链接:http://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string
gzjq41n42#
如果您已经使用了@svgr/webpack模块来允许webpack处理svgs的导入,@svgr会提供一个页面,介绍如何使用Jest处理测试。Here
为后人抄录。
/__mocks__/svgrMock.js
单位:
package.json
m2xkgtsf3#
您可以使用npm包
jest-transform-stub
在Jest配置文件中,添加如下转换:
t3psigkw4#
1.使用类似于以下
__mocks__/svgMock.js
文件的内容模拟SVG:1.通过使用以下属性修改jest.config.js来告诉Jest在哪里可以找到这个SVG模拟器: