Unable to use Jest: SyntaxError: Unexpected identifier at Runtime.createScriptFromCode - reactjs

Question

I just installed Jest with npm and now I'm trying to run some tests. Turns out I'm not able to do so since I get the following error:
● Test suite failed to run
C:\Users\aleja\Documents\FINAL PAW POSTA\paw-2018b-10\frontend\src\tests\PublicationService.test.js:3
import PublicationService from '../services/PublicationService'; // import * as StatusCode from '../util/StatusCode'
^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)
And here's my package.json. I've read on other questions about babel.rc files and stuff but I don't even have those files.
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.7.4",
"#material-ui/core": "^4.8.2",
"#material-ui/icons": "^4.5.0",
"#material/react-linear-progress": "^0.15.0",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.17.0",
"babel-jest": "^25.1.0",
"bootstrap": "^4.4.1",
"crypto-js": "^3.1.9-1",
"enzyme": "^3.11.0",
"formik": "^1.5.8",
"i18next": "^17.3.1",
"i18next-browser-languagedetector": "^3.1.1",
"i18next-xhr-backend": "^3.2.2",
"jest": "^25.1.0",
"mutex-promise": "^0.1.0",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-bootstrap-switch": "^15.5.3",
"react-content-loader": "^4.3.4",
"react-dom": "^16.12.0",
"react-form-validator-core": "^0.6.4",
"react-geocode": "^0.2.1",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.13.2",
"react-images-upload": "^1.2.7",
"react-images-viewer": "^1.6.2",
"react-material-ui-form-validator": "^2.0.9",
"react-notifications-component": "^2.2.4",
"react-paginate": "^6.3.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"react-spring": "^8.0.27",
"react-toast-notifications": "^2.4.0",
"redux": "^4.0.5",
"toasted-notes": "^3.2.0",
"webfontloader": "^1.6.28",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"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/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#testing-library/jest-dom": "^5.0.2",
"#testing-library/react": "^9.4.0",
"babel-plugin-transform-es2015-modules-amd": "^6.24.1",
"grunt": "^1.0.4",
"grunt-babel": "^8.0.0",
"grunt-sass": "^3.1.0",
"grunt-war": "^0.5.1",
"node-sass": "^4.13.1",
"react-test-renderer": "^16.12.0",
"reactotron-react-js": "^3.3.7",
"sass": "^1.24.0"
},
"jest": {
"modulePaths": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"homepage": "http://mypage.com/",
"proxy": "http://localhost:8080"
}
I've added some babel dependencies but the issue still doesn't get fixed.
I also added the "Jest" part in my package.json I read on another question. Still no luck.

Answer 1

Ok seems like I had to create a babel.config.js file in the root directory as it says here
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};