DEV Community

sarahFarjallah
sarahFarjallah

Posted on

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

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 ?

Top comments (0)