[react-jss] Jest tests error

[altgifted]

Problem with testing react with jest. I am getting this error whenever I use jss in a component.

Also i have a valid config for jest:

{
  "moduleDirectories": [
    "node_modules",
    "src"
  ],
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|pdf)$": "identity-obj-proxy"
  },
  "preset": "ts-jest",
  "roots": [
    "<rootDir>/src"
  ],
  "setupFilesAfterEnv": [
    "<rootDir>/src/setupTests.js"
  ],
  "testEnvironment": "jsdom",
  "testMatch": [
    "<rootDir>/src/**/__tests__/**/*.{ts,tsx}",
    "<rootDir>/src/**/*(*.)(spec|test).{ts,tsx}",
    "<rootDir>/test/**/*.{ts,tsx}",
    "<rootDir>/test/**/?(*.)(spec|test).{ts,tsx}"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.jsx?$": "babel-jest"
  },
  "verbose": true
}

[playfulpachyderm]

I'm getting this problem too, and despite a lot of searching, I haven't found any workarounds for it. It seems like until this is addressed I won't be able to use JSS.

[kof]

I suspect you have transpiled your test file, but the lib code is not transpiled and you are trying to load ESM version into environment that doesn't support esm.

I don't know how other libraries that use module keyword with esm code in the dist do this. A possible solution is to enable modules in your node instance. Another possible solution is to use require in your tests, I am guessing it would be loading the commonjs version.

cc @TrySound

[TrySound]

Jest does not look into module field. This should not be a problem. Maybe something in babel config may give some light. Could anybody provide a reproduction example? It's hard to guess without more information.

[kof]

If we can say for sure that this is not a problem with JSS build but with jest/babel, then this question should be asked somewhere else.

[smarschollek]

i stumbled upon same SyntaxError - are there any clues or other discussions about that topic besides that it is maybe linked to jest/babel ?

[jasmaa]

I was able to reproduce the error here. It looks like the issue is from a conflict between node_modules/react-jss/src/jss.js and node_modules/jss. Jest tries to use node_modules/react-jss/src/jss.js first instead of node_modules/jss which is causing the error. When I renamed node_modules/react-jss/src/jss.js to something else, the error went away.

Only workaround I found is to create a version conflict by installing a version of jss different from the react-jss version I currently had. This added a nested node_modules within node_modules/react-jss which react-jss consumed jss from instead of from src.

[pnpetrov]

I was looking at a repository with the same issue. The issue was with wrongly configured module directories. Including src in the moduleDirectories config means that all src directories can be used recursively for resolving module's location when you probably want to target only the root src directory.

Changing the moduleDirectories config from

"moduleDirectories": [
    "node_modules",
    "src"
]

to

"moduleDirectories": [
    "node_modules",
    "<rootDir>/src"
]

should be enough to resolve the jss module resolution