Jest unexpected token - reactjs

Question

I'm running yarn test on a project and I get the following error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as a11yDark } from './a11y-dark';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import React, { PureComponent } from "react";
2 | import SyntaxHighlighter from "react-syntax-highlighter";
> 3 | import { idea } from "react-syntax-highlighter/dist/esm/styles/hljs";
my tsconfig.json is as follows:
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
]
}
I'm using ts-jest and my jest.config.js is set as:
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
and my package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.15.0"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.8.1",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/react-fontawesome": "^0.1.4",
"#types/jest": "26.0.15",
"#types/node": "14.14.7",
"#types/node-fetch": "^2.5.7",
"#types/react": "17.0.0",
"#types/react-dom": "17.0.0",
"#types/react-router-dom": "5.1.6",
"#types/react-syntax-highlighter": "13.5.0",
"bootstrap": "^4.5.3",
"hydrogen": "0.2.0",
"node-fetch": "^2.6.1",
"react": "17.0.1",
"react-app-polyfill": "2.0.0",
"react-dom": "17.0.1",
"react-ga": "3.3.0",
"react-markdown": "5.0.3",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.1",
"react-syntax-highlighter": "15.3.1",
"tslint": "^6.1.3",
"typescript": "4.1.2",
"url-search-params-polyfill": "8.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "tsc --noEmit -p . && react-scripts test --all",
"eject": "react-scripts eject",
"lint": "tslint --project ."
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#types/enzyme": "^3.10.8",
"#types/enzyme-adapter-react-16": "^1.0.6",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "^1.15.5"
}
}
not really sure on what am I doing wrong here, I've tried configuring jest and typescript but I got nowhere.

Answer 1

The answer was importing the module as commonjs instead of esm, as:
import idea from "react-syntax-highlighter/dist/cjs/styles/hljs/idea";