Syntax Error can't use import outside of module when testing with jest

sarahFarjallah — Fri, 08 Dec 2023 11:30:21 +0000

hi everyone,
I installed jest with all needed libraries for testing react applications and I'm facing an error everytime I run npm run test
this is my package.json

{ "engines": { "node": "14.20.0", "npm": "6.x.x" }, "name": "ui-v2", "version": "0.1.0", "private": true, "dependencies": { "@amcharts/amcharts3-react": "^3.1.1", "@amcharts/amcharts4": "^4.10.35", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@material-ui/core": "^4.12.4", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.0", "@reduxjs/toolkit": "^1.9.5", "file-saver": "^2.0.5", "firebase": "^9.9.0", "inflected": "^2.1.0", "javascript-color-gradient": "^2.4.4", "jquery": "^3.7.0", "jqueryui": "^1.11.1", "moment": "^2.29.4", "plotly.js": "^2.23.0", "rc-slider": "^9.7.5", "react": "^17.0.2", "react-cookies": "^0.1.1", "react-dom": "^16.14.0", "react-dropdown-tree-select": "^2.8.0", "react-grid-layout": "^1.3.4", "react-helmet": "^6.1.0", "react-https-redirect": "^1.1.0", "react-phone-input-2": "^2.15.1", "react-plotly.js": "^2.6.0", "react-popup": "^0.10.0", "react-redux": "^8.0.5", "react-router-dom": "^5.3.4", "react-scripts": "^5.0.1", "react-select": "^4.3.1", "react-table": "6.9.0", "react-trello": "^2.2.11", "redux": "^4.2.0", "shortid": "^2.2.16", "tabulator-tables": "~4.9.3", "uikit": "~3.11.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "jest", "coverage": "jest --coverage", "eject": "react-scripts eject" }, "client": { "machine_name": "pi", "categoryToolkit": true, "isAdmin": true, "version": "2.87.0.17" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "@babel/plugin-transform-private-property-in-object": "^7.21.11", "@redux-devtools/core": "^3.13.1", "@svgr/webpack": "^6.2.1", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^14.1.2", "eslint-plugin-jest": "^27.6.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "resolve-url-loader": "^5.0.0", "webpack-dev-server": "~4.10.0" }, "overrides": { "@svgr/webpack": "$@svgr/webpack", "resolve-url-loader": "$resolve-url-loader", "webpack-dev-server": "$webpack-dev-server" } }

this is my jest.config.js

module.exports = { collectCoverage: true, collectCoverageFrom: ['src/**/*.{js,jsx}'], coverageDirectory: 'coverage', testEnvironment: 'jsdom', setupFilesAfterEnv: ['<rootDir>/jest.setup.js'], }

this is my jest.setup.js

import '@testing-library/jest-dom'

Can anyone tell me what I'm missing here ?

DEV Community: sarahFarjallah

Syntax Error can't use import outside of module when testing with jest