Trying pull of a simple unit test with Jest for the first time. I'm testing a method called convertTypetoText in my Vue component and I'm getting an error that says:

Details:

C:\Webprojekti1\mygamecollection\src\components\Main.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>
                                                                                  ^

SyntaxError: Unexpected token '<'

Main.spec.js (the test):

import { shallowMount } from '@vue/test-utils';
import Main from '../src/components/Main.vue';

describe('Testing type to text conversion', () => {
    const wrapper = shallowMount(Main);

    it('correctly converts from "t" or "f" letter to text', () => {
        expect(wrapper.vm.convertTypeToText('F')).toBe('Physical_copy');
    })

})

I have attempted adding a jest config file with transform configurations.

jest.config.js:

const path = require('path');
module.exports = {
        rootDir: path.resolve(__dirname, '../../'),
        moduleFileExtensions: [
            'js',
            'vue',
            'html'
        ],
    preset: '@vue/cli-plugin-unit-jest',
    transformIgnorePatterns: [
        "/src/(?!mygamecollection)"
    ],
    testPathIgnorePatterns: [
        "<rootDir>/src/"
    ],
    modulePaths: [
        "<rootDir>"
    ],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    transform: {
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
        '.*\\.vue$': '<rootDir>/node_modules/vue-jest',
        "^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
    },
    testMatch: [
        '<rootDir>/(test/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
    ]
}

Sorry if this was incomprehensible or anything like that. I am quite lost with Vue.