Importing mp3 asset in Vuetify App break Jest tests - vuejs2

Question

I saw similar topic connected to React but the highest rated solution doesn't work for me, so I decided to add question by myself. I have a Vuetify project that is testing with vue-test-utils. I wanted to add an audio asset using import in errorHandler.ts file that I am using to handle errors accross whole app:
import { AxiosError } from 'axios';
import store from '#/store';
import errorSound from '#/assets/sounds/errorSound.mp3';
const ErrorHandler = {
handler(error: AxiosError): void {
if (error.response) {
const { status, data } = error.response;
const apiMessage = data['hydra:description'] || data.message;
const { errors } = data;
const message = this.createErrorMessage(status, apiMessage, errors);
const audio = new Audio(errorSound);
store.commit('globals/SET_ALERT_TITLE', 'errors.title');
store.commit('globals/SET_ALERT_TEXT', message);
store.commit('globals/SET_ALERT_DIALOG');
store.commit('globals/SET_ALERT_TWO_BUTTONS', false);
audio.play();
}
},
createErrorMessage(status: number, message: string, errors: any): string {
switch (status) {
case 0:
return 'No connection to the network can be established, please check your network settings';
case 400:
return 'errors.400';
case 401:
return 'errors.401';
case 403:
return 'errors.403';
case 404:
return 'errors.404';
case 405:
return 'errors.405';
case 406:
return 'errors.406';
case 408:
return 'errors.408';
case 412:
return message;
case 422:
if (errors) {
const err = [] as any;
Object.entries(errors).forEach(([key, value]) => {
err.push(`${key}: ${value}`);
});
let showErrors = '';
err.forEach((item: any) => {
showErrors += `${item} `;
});
return showErrors;
}
return message;
case 500:
return 'errors.500';
case 502:
return 'errors.502';
case 503:
return 'errors.503';
default:
return `${status}`;
}
},
};
export default ErrorHandler;
In development mode everything is working correctly, the app is building and sound is playing when it should but I cannot build for production cause of failing tests. I added moduleNameMapper to jest.config.ts and file is looking like this:
process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
preset: 'ts-jest',
testMatch: ['**/__tests__/**/*.(js|ts|tsx)', '**/?(*.)+(spec|test).(js|ts|tsx)'],
moduleFileExtensions: ['ts', 'js', 'json', 'vue', '*'],
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.[jt]s$': 'ts-jest',
'^.+\\.svg$': '<rootDir>/svgTransform.js',
},
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/src/__mock__/fileMock.js',
'\\.(css|less)$': '<rootDir>/src/__mock__/styleMock.js',
},
transformIgnorePatterns: [
'/node_modules/(?!register-service-worker|vuetify/lib|vee-validate/dist/rules|jwt-decode)',
],
setupFiles: ['./tests/setup.ts'],
};
Unfortunately this is not working for my errorSound.mp3 file. I also tried to move this moduleNameMapper from config.jest.ts right into package.json but also didn't work out.
Error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){ID3
^
SyntaxError: Invalid or unexpected token
3 | import errorSound from '#/assets/sounds/errorSound.mp3';
4 |
> 5 | const ErrorHandler = {
| ^
6 | handler(error: AxiosError): void {
7 | if (error.response) {
8 | const { status, data } = error.response;
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/services/ErrorHandler.ts:5:50)