How to configure jest with vanilla-extract css ?

[adityaphilips]

How to configure jest with vanilla-extract css? Issue is coming like:
Styles were unable to be assigned to a file. This is generally caused by one of the following:
- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration.
jest.config.js -
module.exports = {
verbose: true,
setupFilesAfterEnv: ['./jest.setup.ts'],
testEnvironment: 'jsdom',
moduleNameMapper: {
// ".(css.ts|css)$": "identity-obj-proxy",
},
transform: {
'^.+\.css\.(ts|js)$': '@vanilla-extract/jest-transform',
'.(ts|tsx)': 'ts-jest',
"^.+\.css\.ts$": "babel-jest"
},
moduleFileExtensions: ['ts', 'tsx', 'js']
};
devDependencies
"devDependencies": {
"@babel/core": "^7.23.2",
"@babel/preset-env": "^7.23.2",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.2",
"@testing-library/dom": ">=7.21.4",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.5.12",
"@types/node": "18.11.9",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/testing-library__jest-dom": "^5.14.6",
"@vanilla-extract/jest-transform": "1.1.4",
"@vanilla-extract/webpack-plugin": "2.3.6",
"axios-mock-adapter": "^1.21.5",
"babel-jest": "29.7.0",
"babel-loader": "^9.1.2",
"copy-webpack-plugin": "11.0.0",
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"lint-staged": "^13.2.0",
"mini-css-extract-plugin": "2.8.1",
"postcss": "8.4.31",
"prettier": "^2.8.4",
"react-refresh": "^0.14.0",
"react-test-renderer": "^18.2.0",
"resolve-url-loader": "5.0.0",
"sass": "1.59.3",
"sass-loader": "^13.2.0",
"semver": "7.5.4",
"style-loader": "^3.3.2",
"tough-cookie": "4.1.3",
"ts-jest": "^29.1.2",
"typescript": "^5.4.5",
"webpack": "^5.76.1",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0",
},
Can anyone guide how to fix this issue ?

[askoufis]

Have you read the Jest section of the Test Environments documentation page? That should hopefully help. At a glance, I'm not sure if identity-obj-proxy is necessary. You could try removing that.

Otherwise, it would be very helpful to have a minimal reproduction of your issue so it's easier to debug, rather than just a dump of your dependencies and configuration.