I am writing tests for a React App. While running my tests, I'm getting this error.Error Message
Grid is being exported from "node_modules/gridjs/dist/index.d.ts" Export file
Here is my jest.config.js
module.exports = {
rootDir: "src",
testEnvironment: "jsdom",
transform: {
"^.+\\.(j|t)sx?$": "babel-jest",
},
moduleNameMapper: {
"\\.(css)$": "identity-obj-proxy",
},
setupFilesAfterEnv: [
"../node_modules/@testing-library/jest-dom/dist/index.js",
],
};
Here is my .babelrc file
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"env": {
"test": {
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}
}
}
Here is my babel.config.json
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"useESModules": true,
"regenerator": false
}
]
],
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": "current node"
}
],
["@babel/preset-typescript"]
]
}
}
}
Here is my ts.config.json
{
"compileOnSave": true,
"compilerOptions": {
"outDir": "./dist/",
"rootDir": "src",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
},
"include": [
"./**/*"
],
"exclude": [
"./dist/**/*"
]
}
Here is my package.json
{
"name": "placeholder",
"scripts": {
"start": "webpack-dev-server --env=development",
"build": "webpack --mode=production --env=production",
"analyze": "webpack --mode=production --env.analyze=true --env=production",
"lint": "eslint src --ext js",
"format": "prettier --write \"./**\"",
"test": "cross-env BABEL_ENV=test jest",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"coverage": "cross-env BABEL_ENV=test jest --coverage"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/plugin-transform-modules-commonjs": "^7.22.5",
"@babel/plugin-transform-runtime": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.4",
"@babel/runtime": "^7.21.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.0",
"@types/systemjs": "^6.13.1",
"babel-eslint": "^11.0.0-beta.2",
"babel-jest": "^29.5.0",
"concurrently": "^8.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^4.2.1",
"husky": "^8.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.6.0",
"jest-cli": "^29.5.0",
"jest-environment-jsdom": "^29.6.0",
"jest-fetch-mock": "^3.0.3",
"prettier": "^2.8.7",
"pretty-quick": "^3.1.3",
"single-spa-react": "^5.0.1",
"systemjs-webpack-interop": "^2.3.7",
"webpack": "^5.78.0",
"webpack-cli": "^5.0.1",
"webpack-config-single-spa-react": "^4.0.4",
"webpack-dev-server": "^4.13.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@jsonforms/core": "^3.0.0-rc.0",
"@jsonforms/material-renderers": "^3.0.0",
"@jsonforms/react": "^3.0.0-rc.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.11.16",
"@mui/system": "^5.11.16",
"@rjsf/core": "^5.5.2",
"@testing-library/user-event": "^14.4.3",
"@types/node": "^18.15.11",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"axios": "^1.3.5",
"chokidar": "^3.5.3",
"dotenv": "^16.0.3",
"dotenv-webpack": "^8.0.1",
"gridjs": "^6.0.6",
"gridjs-react": "^6.0.1",
"js-cookie": "^3.0.1",
"material-icons-react": "^1.0.4",
"notistack": "^3.0.1",
"nwsapi": "^2.2.7",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-dropdown-select": "^4.9.3",
"react-router-dom": "^6.10.0",
"react-scripts": "^5.0.1",
"react-shadow-root": "^6.2.0",
"react-use-websocket": "^4.3.1",
"regenerator-runtime": "^0.13.11",
"string-similarity": "^4.0.4",
"ts-node": "^10.9.1",
"typescript": "^4",
"uuid": "^9.0.0"
},
"types": "placeholder"
}
I'm pretty sure it's a config issue. I've checked Babel, Jest, and TypeScript docs but have found no clear solution.
