I have a simple testing project, which has a Custom component to import from some @fluentui/azure-theme package in src/Custom.tsx file:

import * as StyleConstants from '@fluentui/azure-themes/lib/azure/Constants'; 

when I run npm run test, it showing the error:

SyntaxError: Cannot use import statement outside a module

if I commented above and copying the Constants.js file to the root folder and changing the import like below:

//import * as StyleConstants from '@fluentui/azure-themes/lib/azure/Constants';
import * as StyleConstants from '../Constants'

Then npm run test, it does not throw error and seems successful run. It looks Jest cannot transform the files under node_modules folder to .js file. I searched the resolution and find some posts saying, you can add the transformIgnorePatterns in jest.config.js file, I did that to exclude “@fluentui” to be ignored, but after that, I still met same error.

You can download my sample project here, and then run “npm install” and “npm run test” to replicate what I stated above. Any tips is appreciated!

My jest.config.js file is below:

module.exports = {
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    transformIgnorePatterns: [
        "/node_modules/(?!@fluentui)/"
    ],
    moduleNameMapper: {
        // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
        "uuid": require.resolve('uuid'),
    },
};

And my tsconfig.json:

{
    "compilerOptions": {
      "jsx": "react",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true
    }
}

And my package.json file,

{
    "name": "importing-testing",
    "version": "1.0.0",
    "description": "This branch contains code",
    "main": "index.js",
    "private": true,
    "scripts": {
        "start": "webpack-dev-server .",
        "build": "webpack .",
        "test": "jest App",
        "coverage": "jest --coverage",
        "lint": "eslint . --fix --max-warnings=0",
        "format": "prettier . --write"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "homepage": "",
    "devDependencies": {
        "@babel/cli": "^7.17.10",
        "@babel/core": "^7.17.10",
        "@babel/preset-env": "^7.17.10",
        "@babel/preset-react": "^7.16.7",
        "@babel/preset-typescript": "^7.24.1",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.2.0",
        "babel-loader": "^8.2.5",
        "eslint": "^8.15.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jest": "^26.2.2",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-react": "^7.29.4",
        "eslint-plugin-react-hooks": "^4.5.0",
        "html-webpack-plugin": "^5.5.0",
        "jest": "^28.1.3",
        "jest-environment-jsdom": "^28.1.0",
        "lint-staged": "^12.4.1",
        "prettier": "2.6.2",
        "webpack-dev-server": "^4.9.0"
    },
    "dependencies": {
        "@fluentui/azure-themes": "8.6.34",
        "@types/jest": "^29.5.12",
        "@types/node": "^20.12.11",
        "@types/react": "^18.3.1",
        "@types/react-dom": "^18.3.0",
        "babel-jest": "^29.7.0",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
        "ts-jest": "^29.1.2",
        "typescript": "^5.4.5"
    },
    "lint-staged": {
        "*.js": "npm run lint",
        "*.{js,css,md,html,json}": "npm run format"
    }
}