Typescript + jest Cannot use import statement outside a module

Question

I nearly searched every topic in google but it looks like it changes with the config and version.

I am having trouble with ES6 imports. I did everything I can, I checked ts-jest and jest github issues and whole stackoverflow but couldn't get it done. Maybe I am forgetting something? I am still getting this error: SyntaxError: Cannot use import statement outside a module

I really don't know what else to do...

my babel.config.js

module.exports = api => {
    const isTest = api.env('test');
    // You can use isTest to determine what presets and plugins to use.

    return {
        presets: [
            [
                '@babel/preset-env',
                '@babel/preset-typescript',
                {
                    targets: {
                        node: 'current',
                    },
                },
            ],
        ],
        env: {
            test: {
                plugins: [
                    "transform-es2015-modules-commonjs"
                ]
            }
        }
    };
};

jest.config.js

module.exports = {
    preset: 'ts-jest',
    rootDir: "./",
    testEnvironment: "node",
    globals: {
        'ts-jest': {
            tsconfig: {
                jsx: 'react',
                isolatedModules: true
            },
        },
    },
    testPathIgnorePatterns: ['/dist', '<rootDir>/src/assets'],
    transform: {
        '^.+\\.ts?$': 'ts-jest',
    },
    moduleNameMapper: {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
        "\\.(css|less)$": "<rootDir>/src/__mocks__/fileMock.js",
        "^@common(.*)$": "<rootDir>/src/common$1",
    },
    collectCoverage: true,
    verbose: true,

};

my package.json

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "dayjs": "^1.10.7",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hot-loader": "^4.13.0",
    "react-scripts": "4.0.3",
    "react-select": "^5.1.0",
    "react-spinners": "^0.11.0",
    "sp-rest-proxy": "^3.1.1",
    "typescript": "^3.6.4",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "serve": "node server.js",
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "npx jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "@babel/preset-typescript": "^7.16.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-core": "7.0.0-beta.3",
    "babel-jest": "^27.3.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "css-loader": "^3.2.0",
    "file-loader": "^6.2.0",
    "jest": "26.4.2",
    "react-test-renderer": "^17.0.2",
    "style-loader": "^1.0.0",
    "ts-jest": "26.3.0",
    "ts-loader": "^9.2.6",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  }
}

and lastly tsconfig

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es5",
        "lib": [
            "es2015",
            "es2017",
            "ES6",
            "dom"
        ],
        "types": [
            "jest"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react",
        "baseUrl": "./",
        "paths": {
            "@common/*": [
                "src/common/*"
            ],
            "@components/*": [
                "src/components/*"
            ],
            "@webparts/*": [
                "src/WebParts/*"
            ],
        }
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ]
}```

Getting the same issue and I've tried every possible thing you could imagine. still not working. Have you found a solution ? — jaybe78, Jan 10 '22 at 20:30
@jaybe78 unfortunately not, if you could use commonjs modules there shouldn't be any problem. Maybe you can try to transform or use the new version. Check this [link](https://stackoverflow.com/questions/35756479/does-jest-support-es6-import-export). I gave up looking for solutions since I didn't have enough time for it. Also try to ask jest team, maybe they can offer better help. — Ozan Mudul, Jan 11 '22 at 09:13
@Charleskimani unfortunately we didn't have time for testing so it is canceled. No idea mate sorry — Ozan Mudul, Apr 22 '22 at 14:58

Typescript + jest Cannot use import statement outside a module

0 Answers0