Getting error "SyntaxError: Cannot use import statement outside a module" when try to add jest to a next.js javascript

Question

Jest encountered an unexpected token

The screenshot has more details.

  { 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.}

Code that is throwing the error.

line 3 throws the error. when i comment it out everything works fine.

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import DynamicPageComponent from '@/components/DynamicPageComponent';


describe("true is true and false is false", () => {
    test("true is true", () => {
      expect(true).toBe(true);
    });
  
    test("false is false", () => {
      expect(false).toBe(false);
    });
  });

SyntaxError: Cannot use import statement outside a module.

screenshot of the error

package.jsonError screenshot

"dependencies": {
    "axios": "^1.6.2",
    "babel-jest": "^29.7.0",
    "moment": "^2.30.1",
    "next": "14.0.4",
    "next-intl": "^3.9.5",
    "react": "^18",
    "react-dom": "^18",
    "striptags": "^3.2.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.24.3",
    "@babel/preset-react": "^7.24.1",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",


    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@babel/plugin-transform-runtime": "^7.23.7",
    "babel-plugin-syntax-class-properties": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
  }
}

jest.config.js

const nextJest = require('next/jest')
 
/** @type {import('jest').Config} */
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
const config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

    // Handle CSS imports (without CSS modules)
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',

    // Handle image imports
    // https://jestjs.io/docs/webpack#handling-static-assets
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,

    // Handle module aliases
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jest-environment-jsdom',
  moduleDirectories: ['node_modules', '<rootDir>/'],
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel', '@babel/preset-react',"@babel/preset-env" ]}],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],

  
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(config)

# jsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

I have tried changing the transform and adding different solutions i found online but none of them have worked. The issue only happens when i try to import the component in the test. When i comment the component import statement the error goes away.