gpt4 book ai didi

reactjs - Jest : SVG require causes "SyntaxError: Unexpected token <"

转载 作者:搜寻专家 更新时间:2023-10-30 20:33:05 27 4
gpt4 key购买 nike

不确定在哪里查找此错误。

将 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 时忽略抛出这个错误?

最佳答案

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

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

现在您需要为 svg 文件添加转换器。让我们扩展你的 Jest 配置

"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

关于reactjs - Jest : SVG require causes "SyntaxError: Unexpected token <",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46791263/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com