[Bug] Cannot use import statement outside a module - Jest

Describe the Bug

Hi. I’m using OHIF 3.7.0 and I’m trying to run some Jest tests, but I get the error:

/ohif/dev/viewer/platform/ui/src/index.js:7
    import * as Types from './types';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React, { useState } from "react";
    > 2 | import { Select } from "@ohif/ui";
        | ^

    at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (src/Form/form.tsx:2:1)
      at Object.<anonymous> (__tests__/Form/form-test.tsx:4:1)

My code:

import React, { useState } from "react";
import { Select } from "@ohif/ui";

const Form = ({ servicesManager, extensionManager, studies, dataSource }) => {
    // Load the cohorts
    const { MyService } = servicesManager.services;
    const cohorts = [{ name: "Select cohort..." }].concat(
        MyService.getState().memberCohorts,
    );
    const [cohort, setCohort] = useState<any | null>(null);

    return (
        <div className="h-[480px]">
            <div className="border-primary-main px-2 py-2">
                <div className="flex flex-row gap-2 py-2">
                    <label className="text-base text-primary-light whitespace-nowrap">
                        Select the cohort you want to work with:
                    </label>
                    <Select
                        id="cohorts"
                        isMulti={false}
                        isClearable={false}
                        closeMenuOnSelect={true}
                        hideSelectedOptions={false}
                        options={cohorts.map((c) => ({
                            label: c.name,
                            value: c.name,
                        }))}
                        onChange={(v) => setCohort(v)}
                        value={cohort}
                    />
                </div>
            </div>
        </div>
    );
};

export default Form;

The test:

import React from "react";
import { render } from "@testing-library/react";

import Form from "~/Form/form";

const mockServicesManager = {
  services: {
    MyService: {
      getState: jest.fn().mockReturnValue({
        memberCohorts: [{ name: 'Cohort 1' }, { name: 'Cohort 2' }],
      }),
    },
  },
};

const mockExtensionManager = {};
const mockStudies = [];
const mockDataSource = {};

test("should render", () => {
  render(
    <Form
      servicesManager={mockServicesManager}
      extensionManager={mockExtensionManager}
      studies={mockStudies}
      dataSource={mockDataSource}
    />
  );
})

Dependencies:

"peerDependencies": {
    "@ohif/core": "^3.0.0",
    "@ohif/extension-cornerstone": "^3.0.0",
    "@ohif/extension-default": "^3.0.0",
    "@ohif/i18n": "^1.0.0",
    "@ohif/ui": "^3.7.0",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^12.2.2",
    "react-router": "^6.8.1",
    "react-router-dom": "^6.8.1",
    "webpack": "^5.50.0",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.13",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "react-i18next": "^14.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-arrow-functions": "^7.16.7",
    "@babel/plugin-transform-regenerator": "^7.16.7",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/plugin-transform-typescript": "^7.13.0",
    "@babel/preset-env": "^7.24.6",
    "@babel/preset-react": "^7.24.6",
    "@babel/preset-typescript": "^7.13.0",
    "@testing-library/dom": "^10.1.0",
    "@testing-library/react": "^16.0.0",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "babel-eslint": "9.x",
    "babel-jest": "^29.7.0",
    "babel-loader": "^8.2.4",
    "babel-plugin-inline-react-svg": "^2.0.2",
    "babel-plugin-module-resolver": "^5.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.2.0",
    "cross-env": "^7.0.3",
    "dotenv": "^14.1.0",
    "eslint": "^5.0.1",
    "eslint-loader": "^2.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-junit": "^16.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-test-renderer": "^18.3.1",
    "ts-jest": "^29.1.4",
    "typescript": "^5.4.5",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2",
    "webpack-merge": "^5.7.3"
  }

Steps to Reproduce

Using OHIF 3.7.0, create a new custom extension using the CLI, and display a React Component in it, using the component Select from the ohif/ui module
Install the dependencies and write a test where you render the React Component mentioned in the previous step
Configure Babel, Jest and Typescript
Run Jest using yarn jest

The current behavior

Receiving the error

SyntaxError: Cannot use import statement outside a module

The expected behavior

To run the test

OS

Fedora Linux 40 (Workstation Edition) 64 bits

Node version

v20.12.2

Browser

Firefox 126.0 64 bits

OHIF / Viewers

[Bug] Cannot use import statement outside a module - Jest #4208