Jest 找不到带有“.svg?react”的模块 Vite + React + Ts + Jest

Question

我正在尝试测试我用 vite + React + ts 制作的应用程序，但是当我想制作我的仪表板组件时，jest 抱怨它找不到“svg？react”模块。

这是我开始测试时jest的问题

Cannot find module './brand.svg?react' from 'src/sections/dashboard/Dashboard.tsx'

这是我的 vite.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import dotenv from "dotenv";
import svgr from 'vite-plugin-svgr'

dotenv.config();
export default defineConfig((configEnv) => {
    const isDevelopment = configEnv.mode === "development";

    return {
        plugins: [react(), svgr()],
        css: {
            modules: {
                generateScopedName: isDevelopment ? "[name]__[local]__[hash:base64:5]" : "[hash:base64:5]",
            },
        },
        define: {
            "process.env": process.env,
        },
    };
});

这是我的 jest.config.js

module.exports = {
    testEnvironment: "jsdom",
    setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
    testMatch: ["<rootDir>/tests/**/*.(test).(ts|tsx)"],
    testPathIgnorePatterns: ["<rootDir>/tests/e2e/"],
    transform: {
        "^.+\\.(js|jsx|ts|tsx)$": [
            "@swc/jest",
            {
                sourceMaps: true,
                jsc: {
                    parser: {
                        syntax: "typescript",
                        tsx: true,
                    },
                    transform: {
                        react: {
                            runtime: "automatic",
                        },
                    },
                },
            },
        ],
    },
    moduleNameMapper: {
        "\\.(svg$|svg?react)": "<rootDir>/tests/svg.mock.js",
        "\\.(css|less|scss|sass)$": "identity-obj-proxy",
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
            "jest-transform-stub",
    },
};

这是我的 svg.mock.js

/* eslint-disable import/no-anonymous-default-export */
export default "SvgrURL";
export const ReactComponent = "div";

以前，我寻找如何使用 vite-plugin-svgr 解决 svg 的 vite 问题并且它有效，但现在这会与 Jest 产生冲突。我真的很纠结这个问题，但有了 CRA，这种情况就不会发生。

Answer 1

我也遇到过类似的情况。什么对我有用

//svgr-mock.js
const SvgComponent = (props) => {
  return React.createElement('svg', {
    ...props,
    'data-testid': 'svg-mock',
  });
};
module.exports = SvgComponent;
module.exports.ReactComponent = SvgComponent; 

//jest-config.js
const config: Config = {
  roots: ['<rootDir>/src'],
  verbose: true,
  testEnvironment: 'jest-environment-jsdom',
  modulePaths: ['<rootDir>/src'],
  setupFilesAfterEnv: ['@testing-library/jest-dom', '<rootDir>/src/tests/setup/setup-tests.ts'],
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|svg|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/src/tests/setup/file-transform.js',
  },
  moduleNameMapper: {
    '\\.svg\\?react$': '<rootDir>/src/tests/setup/svgr-mock.js',
    '\\.(css|scss)$': '<rootDir>/src/tests/setup/style-mock.js',
  },
  transformIgnorePatterns: [
    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
  testMatch: ['<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}', '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'],
  resetMocks: true,
};

export default config;

如果这不起作用，你也可以提供你的 babel 配置吗？