Estoy tratando de usar Jest y Vite juntos y no están jugando bien.

Uno de mis componentes hace uso de la función de agrupación de activos de Vite donde podemos importar un SVG como este:

 import React from "react"; import mainLogo from "../../assets/main-logo.svg"; const MyComponent = () => { return ( <div className="main-logo w-full"> <img src={mainLogo} className="w-64" /> </div> ) }

Esto funciona bien en Vite, pero cuando trato de probar este archivo con Jest recibo la siguiente queja:

Parece que esto sucede porque Vite está analizando correctamente el SVG cuando ejecuta el servidor de desarrollo y no necesita cargadores adicionales, mientras que Jest no sabe qué hacer aquí. He intentado usar varias transformaciones para archivos SVG, pero ninguna de ellas parece funcionar.

¿Alguien tiene una idea de cómo solucionar esto?

 // jest.config.js const config = { verbose: true, moduleNameMapper: { "\\.(css|scss|sass)$": "identity-obj-proxy" }, setupFiles: ["./jest.setup.js"], testEnvironment: "jsdom", }; module.exports = config;

 //vite.config.js import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [react()], root: "client", envDir: "./environment", build: { outDir: "../build", }, server: { host: true, proxy: { "/api": { target: "http://localhost:3001", changeOrigin: true, secure: false, }, }, }, });