hey i'm trying to create tests with jest but i can't seem to get it to properly read .tsx code
such as in

import ContactPage from "@/app/contacts/[email]/page";
import { render, screen, waitFor } from '@testing-library/react';

test('renders ContactPage and checks email display', async () => {
  render(<ContactPage emailProp = "fiona@example.com" editProp={false} />);

  await waitFor(() => {
    expect(screen.getByText('fiona@example.com')).toBe(true);
  });
});

config here

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/$1"
  },
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
    "^.+\\.js$": "babel-jest"
  }
};

Jest will say unexpected char '<' when it gets to that part
if i don't use render and instead use standard .ts syntax stuff i can run tests just fine