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

[josue-venegas-almonacid]

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

1. 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
2. Install the dependencies and write a test where you render the React Component mentioned in the previous step
3. Configure Babel, Jest and Typescript
4. 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

[sedghi]

is this our issue? since our tests run right now in CI. Checkout latest 3.8 and see what is different maybe