Question

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

undefined

此文件甚至未经测试。我不知道为什么要尝试编译它。我的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)文件仅包含覆盖率阈值。

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

jest.config.json

我的错误消息仅更改为：

C：\ Users \ e-KDKK \ workspace \ konrad \ mikskarpety \ test \ utils \ debounce.test.ts：1 （{“对象。”：功能（模块，导出，要求，__目录名，__文件名，全局，笑话）{导入 {getVersion} from'jest'; ^
"transform": {
    "^.+\\.svg$": "jest-svg-transformer"
},

哪个让我更加困惑。

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

Answer 1

另一个解决此问题的简便方法是jest-svg-transformer。

只需安装： npm i jest-svg-transformer或yarn add jest-svg-transformer

然后将jest.config.js添加到转换部分：

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

Answer 2

另一个选择（不是特定于React的）是使用jest-transform-stub，因为它可以用于您想要的任何非JS文件。

{
  "jest": {
    // ..
    "transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
  }
}

Answer 3

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

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

并在根目录中使用以下内容创建svgTransform.js文件。

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

Answer 4

如果您仍在寻找简单的解决方案，则可以将模拟文件定义为此

// svgMock.js
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
  render: function() {
    return null;
  }
});
module.exports = Greeting;

然后在jest.config文件中执行

{
    "moduleNameMapper": {
        "^.+\\.svg$": "<rootDir>/__mocks__/svgMock.js"
    }
}

Answer 5

从 *.svg 导入 node_modules？

我在从 *.svg¹ 中的图标库导入 node_modules 文件时遇到了同样的问题。在 jest-transform-stub 的 "transform" 部分使用 jest.config.js 对我不起作用，我不得不在 "moduleNameMapper" 部分使用它。

对我有帮助的是（在 jest.config.js 中）：

module.exports = {
  ...
  moduleNameMapper: {
    '^.+.(svg)$': 'jest-transform-stub',
  }
};

¹ 可以在 jest-transform-stub's README 中找到原因。

<块引用>

Jest 默认不会对 node_modules 应用转换。您可以使用 moduleNameMapper 来解决这个问题。

Answer 6

在使用 metric_query.metric.dimensions 时，我的设置将其放置在 jest-svg-transformer 部分下时不起作用。所以我不得不在 transformer 下添加它并且它起作用了。

moduleNameMapper

yarn add jest-svg-transformer --dev

Answer 7

使用默认配置，你必须在 jest.config.js 中编写

"transform": {
    "\\.[jt]sx?$": "babel-jest",
    "^.+\\.svg$": "jest-svg-transformer"
}

开玩笑无法加载SVG文件

7 个答案: