If anyone is this looking for the answer please find it here:

https://stackoverflow.com/a/75969804/17659484

All credit to Zenik. Thank you bro, life saver.

ANSWER

So, I have managed to find the root cause.

The issue was not in the import or aliases as initially thought. The problem was that I was using @svgr/webpack to convert .svg files into the react components.

These, however, are not JSX components, which were throwing an error in tests as Jest did not know how to resolve svg imports.

For anyone having a similar problem, here is the fix.

Create a mock svg that you want to use. In my case, I have created folder __mocks__/svg.tsx with the below code.

import React, { SVGProps } from 'react';

const SvgrMock = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
  (props, ref) => <svg ref={ref} {...props} />
);

export const ReactComponent = SvgrMock;
export default SvgrMock;

Add the config to jest.config.mjs

moduleNameMapper: {
 '^.+\\.(svg)$': '<rootDir>/__mocks__/svg.tsx',   
}, 

This config resolves imports to the mock svg if there are any in components for jest so you can test the functionality.

I hope it helps anyone running into a similar problem.