为什么我不能在Jest中导入SVG？

Question

这是我要测试的组件

页脚/index.jsx

import React from "react";

import logoImg from "@/assets/images/components/header/logo-header.svg";
import HeaderTextImg from "@/assets/images/components/header/header-text.svg";

function Footer() {
  return (
    <div>Footer</div>
  );
}

export default Footer;

当我通过npm run test运行测试时，它会显示错误

​

package.json

 "scripts": {
    "test": "jest --watchAll",
    "test-coverage": "jest --coverage", 
  },
  "jest": {
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }

我试过什么

我试图在jest-svg-transformer中使用package.json，如下所示：

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

它也显示了错误：

    ● Invalid transformer module:
      "/Users/CCCC/Desktop/SourceTree/my-proj/node_modules/jest-svg-transformer/lib/index.js" specified in the "transform" object of Jest configuration
      must export a `process` or `processAsync` or `createTransformer` function.
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation

更新1

我也试过

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

但也不起作用

更新2

也尝试过svg-jest，但仍然不起作用

Answer 1

• 安装camelcase包(npm安装-D camelcase) (纱线添加-D camelcase)
• 在jest目录中创建fileTransform.js文件

/jest/transforms/fileTransform.js

const path = require('path');
const camelcase = require('camelcase');

module.exports = {
    process(src, filename) {
        const assetFilename = JSON.stringify(path.basename(filename));
    if (filename.match(/\.svg$/)) {
        // Based on how SVGR generates a component name:
        // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
        const pascalCaseFilename = camelcase(path.parse(filename).name, {
            pascalCase: true,
        });
        const componentName = `Svg${pascalCaseFilename}`;
        return `const React = require('react');
  module.exports = {
    __esModule: true,
    default: ${assetFilename},
    ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
      return {
        $$typeof: Symbol.for('react.element'),
        type: 'svg',
        ref: ref,
        key: null,
        props: Object.assign({}, props, {
          children: ${assetFilename}
        })
      };
    }),
  };`;
    }

    return `module.exports = ${assetFilename};`;
},
};

• 在package.json中添加以下内容： transform：{‘^(？！.*\.)(js_jsx_’(.*\.)(js_(js、cjs、cjs、