reactjs - Jest kan ikke finne modul med ".svg?react" Vite + React + Ts + Jest

Jeg prøver å teste appen min laget med vite + react + ts, men når jeg vil lage dashbordkomponenten min, klager jest over at den ikke kan finne modulen "svg?react".

Dette er problemet med jest når jeg starter testen

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

Dette er min 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,
        },
    };
});

Dette er min 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",
    },
};

Dette er min svg.mock.js

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

Tidligere så jeg etter hvordan man kunne løse vite-problemet med svg med vite-plugin-svgr, og det fungerte, men nå genererer dette konflikter med Jest. Jeg sitter virkelig fast med dette, men med CRA skjer ikke dette.

Svar #1

Jeg har kommet opp med en annen idé.

  1. Legg til moduleNameMapper for å hjelpe jest med å håndtere denne importsyntaksen: .svg?react. Den konverterer imports som ./icons/myIcon.svg?react til ./icons.myIcons.svg
  moduleNameMapper: {
    '^(.*).svg\\?react$': '$1.svg',
  }
  1. Legg til transformator jest-transformer-svg . '^.+\\.svg(\\?react)?$' - den bruker 'jest-transformer-svg' for vanlige .svg-importer og også .svg?react.
  transform: {
    '^.+\\.svg(\\?react)?$': 'jest-transformer-svg',
  },

Med denne oppsettet gjengis SVG-er slik:

<svg
   class="opt-icon icon iconSmall moreIcon"
   data-file-name="SvgMore_vert24px"
/>

Svar #2

Jeg sto overfor en lignende situasjon. Det som fungerte for meg

//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;

Hvis det ikke fungerer, kan du også oppgi Babel-konfigurasjonen din?

Relaterte artikler