Jest configuration for react component testing

I am trying to set up react component testing with jest in my project, which seems to be a little complicated configuration-wise. Currently I'm getting thrown the following error when trying to run the tests from the test file with the arrow

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

This is where it fails

When I run it from the terminal, however, this part seems to pass. But it throws on something else: Here

Which is annoying, because I'm not able to debug it this way, and from the arrow in the test it fails to run at all so I cannot debug it either.

Here is my package.json relevant dependencies and jest configurations:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "babel-jest": "^28.1.3",
    "lodash-es": "^4.17.21",
    "react": "^18.0.0",
    "react-calendly": "^2.2.2",
    "react-i18next": "^11.8.8",
    "styled-components": "^5.3.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "@lexense/dv-deps": "^4.2.180",
    "@lexense/dv-lint": "^4.2.186",
    "@lexense/dv-prettier": "^4.2.180",
    "@lexense/dv-test": "^4.2.186",
    "babel-jest": "^28.1.3",
    "jest": "^28.1.3",
    "react-test-renderer": "^18.2.0"
  },
  "engines": {
    "node": "16.x",
    "yarn": ">=1.22.0"
  },
  "jest": {
    "testEnvironment": "jest-environment-jsdom",
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  }
}

My babel.config.js file:

module.exports = {
  presets: [
    '@babel/preset-env',
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
};

The test itself Link.spec.js:

// Importing the jest testing library
import '@testing-library/jest-dom';

import { cleanup, render, screen } from '@testing-library/react';
import React from 'react';

import Link from '../src/Link';

// afterEach function runs after each test suite is executed
afterEach(() => {
  cleanup(); // Resets the DOM after each test suite
});

describe('Link Component', () => {
  // Test 1
  test('Link Rendering', () => {
    render(<Link href={'www.facebook.com'} text={'Facebook'} />);
    const link = screen.getByTestId('link');
    expect(link).toBeInTheDocument();
  });
});

I would like some help, if anyone knows about the topic. Thanks in advance.