Vitest not "recognizing/finding" existing SVG files that are found by Jest

[MyC4ITs]

Summary

I'm trying to run Vitest on a test.js file that has .svg files imported into it and the src file it is testing. Due to the following error, I was aiming to get Vitest to just default to a mock file but that's throwing the attached error either way, if I use it or not. Note, jest passes this test Vitest does not.

Initial problem (attached)

On npx vitest src/someFodler/fileToBeTested.test.js, Failed to resolve import, is thrown

Facts

• The files do exist, Jest passed them before
• I have tried creating a fileMock.js to replace the SVGs, vitest is still looking at the initial SVGs
• I have switched the jest.mock to vi.mock, the SVG import paths are still being leveraged at the top, which is expected
• I am importing svgr in both the vite.config and vitest.config .js files (see attached)
  I am adding svgr as a plugin in both the vite and vitest config.js files (see attached)
• "npm install vite-plugin-svgr --save-dev" has been run in root

What I have tried

• I have tried importing them as react components via "import { ReactComponent as MyIcon } from './icon.svg'"
  • I updated the mockFile.js to the below when doing so
    export const ReactComponent = () => 'MockedSVGComponent';
    export default 'mocked-svg';
    * I have added the alias to the vitest.config.js file as below
    alias: {
    '\.svg$': path.resolve(__dirname, 'fileMock.js'), // Use absolute path to fileMock.js
    },

[hi-ogawa]

Can you find a minimal repro?
Vite and Vitest by default allows importing .svg and it works like this https://stackblitz.com/edit/vitest-dev-vitest-ce53pb4m?file=test%2Fbasic.test.ts

// src/basic.ts
import svg from './demo.svg';
export { svg };

// test/basic.test.ts
import { svg } from '../src/basic.js';
test('svg', () => {
  expect(svg).toMatchInlineSnapshot(`"/src/demo.svg"`);
});

[MyC4ITs]

Okay, I fixed it but it took a little playing around. So I'd like to learn why it works now.

I swithced

// src/basic.ts
import svg from 'src/somefolder/demo.svg';

to

// src/basic.ts
import svg from './src/somefolder/demo.svg'; //adding the ./ before the src/

however, when I did this, it did nothing (I added the ./ before src) BUT when I switched src into /../ it worked, so I went from

// src/basic.ts
import svg from 'src/somefolder/demo.svg';

to (switching src with ..

// src/basic.ts
import svg from './../somefolder/demo.svg';

then the error is resolved and we fixed it, however not out of the woods yet