Remix Unit Testing using Jest errors

Question

I am trying to configure Unit Testing using Remix, TypeScripe and Jest

js.config.ts :

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
  preset: 'ts-jest/presets/js-with-ts-esm',
  setupFilesAfterEnv: [`<rootDir>/jest.setup.ts`],
  testEnvironment: 'jsdom',
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
    "\\.[jt]sx?$": "babel-jest"
  },
  moduleDirectories: ["node_modules", "app"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
};

export default config;

babel.config.js :

module.exports = {presets: ['@babel/preset-env']}

package.json

"type": "module",
"scripts": {
    "build": "remix vite:build",
    "dev": "node ./server.js",
    "test": "jest --config jest.config.ts"
}

app/tests/sample.test.tsx

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { createRemixStub } from "@remix-run/testing";
import {
render,
screen,
waitFor,
} from "@testing-library/react";
import React from 'react';

test("renders loader data", async () => {
// ⚠️ This would usually be a component you import from your app code
function MyComponent() {
    const data = useLoaderData() as { message: string };
    return <p>Message: {data.message}</p>;
}

const RemixStub = createRemixStub([
    {
    path: "/",
    Component: MyComponent,
    loader() {
        return json({ message: "hello" });
    },
    },
]);

render(<RemixStub />);

await waitFor(() => screen.findByText("Message: hello"));
});

Getting an error :

Details: C:....\node_modules@web3-storage\multipart-parser\esm\src\index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){import { ^^^^^^

SyntaxError: Cannot use import statement outside a module

> 1 | import { json } from "@remix-run/node";
    | ^
  2 | import { useLoaderData } from "@remix-run/react";

Please help me with correct ways and steps to configure Unit Testing in Remix