I'm trying to use Jest and Vite together and they're not playing nice.

One of my components makes use of Vite's asset bundling feature where we can import an SVG like this:

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>
  )
}

This works fine in Vite, but when I try to test this file with Jest I get the following complaint:

It looks like this is happening because Vite is correctly parsing the SVG when running the development server and doesn't need any extra loaders, whereas Jest doesn't know what to do here. I've tried using various transforms for SVG files, but none of them seem to work.

Anyone have an idea of how to solve this?

// 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,
      },
    },
  },
});