开玩笑无法加载svg文件 [英] Jest cannot load svg file

问题描述

在我的应用程序中，我使用React和TypeScript.我尝试运行开玩笑的测试，但出现以下错误:

In my app I use React and TypeScript. I tried to run jest tests I get following error:

C:\Users\e-KDKK\workspace\konrad\mikskarpety\src\images\icons\Sock.svg:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" width="18.725" height="23.947" viewBox="0 0 18.725 23.947">
                                                                                         ^

SyntaxError: Unexpected token <

  1 | import React, { FC } from 'react';
  2 | 
> 3 | import SockIcon from '../../images/icons/Sock.svg';
    | ^
  4 | 
  5 | export const Spinner: FC = () => {
  6 |   return (

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (src/components/Spinner/Spinner.tsx:3:1)

此文件甚至未经测试.我不知道为什么要尝试编译它.我的 jest.config.json 文件仅包含覆盖率阈值.

This file is not even tested. I don't know why it tries to compile it. My jest.config.json file contains only coverage thresholds.

我了解到开玩笑有时需要为诸如SVG之类的特定文件添加额外的转换部分，但是当我将其添加到配置中时

I read that jest sometimes needs additional transform section for specific files like SVG, but when I added to configuration

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

我的错误消息仅更改为:

my error message changed only to:

C:\ Users \ e-KDKK \ workspace \ konrad \ mikskarpety \ test \ utils \ debounce.test.ts:1({对象.":功能(模块，导出，要求，__目录名，__文件名，全局，笑话){导入{getVersion} from'jest';^

C:\Users\e-KDKK\workspace\konrad\mikskarpety\test\utils\debounce.test.ts:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { getVersion } from 'jest'; ^

SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

哪个让我更加困惑.

您可以在此处找到该应用程序的代码: https://github.com/KonradKlimczak/mikskarpety

The code for the app you can find here: https://github.com/KonradKlimczak/mikskarpety

推荐答案

jest不知道如何加载除js/jsx以外的其他文件扩展名，您需要找到 jest.config.js ，并为svg文件添加转换器.

jest doesn't know how to load other file extensions than js/jsx,you need to find the jest.config.js and add transformer for svg files.

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

并创建svgTransform.js文件(请参见自定义转换器 )，其中包含以下内容.

and create the svgTransform.js file (see Custom transformers) in your root directory with the following content.

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

链接: https://jestjs.io/docs/en/configuration.html#transform-object-string-string

这篇关于开玩笑无法加载svg文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！