Jest encountered an unexpected token in typescript

Question

I'm testing my React+TypeScript Component, but I'm getting this weird message, I tried everything but didn't find any helpful resources, is this is the TypeScript error or something else, to be honest, I'm dizzy here, so I came across an issue:

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/dr/code/npmpackage/darkmode/src/style.module.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.switch {
                                                                                             ^

    SyntaxError: Unexpected token '.'

      1 | import * as React from 'react'
      2 | // import 'learning-npm-package/dist/index.css'
    > 3 | import classes from './style.module.css'

Packages I'm currently using in React Project are below:

"peerDependencies": {
    "react": "^16.0.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.38",
    "@types/react": "^16.9.27",
    "@types/react-dom": "^16.9.7",
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "enzyme-to-json": "^3.5.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.10",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "ts-jest": "^26.1.2",
    "typescript": "^3.7.5"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "react-test-renderer": "^16.13.1"
  }

./style.module.css:

.switch {
  display: flex;
  height: 36px;
  position: relative;
  width: 70px;
}

/** small */
.container {
  height: 26px;
  width: 50px;
}

any help will be appreciated, thanks!

This `./style.module.css` is also needed. Otherwise, it might be difficult to figure out that is wrong. — ikos23, Jul 15 '20 at 10:24
@ikos23 thanks for letting me know, style.module.css contains a lot style I can't upload all here, I updated the quest! — Ericgit, Jul 15 '20 at 10:27
I removed my answer as it does not provide an answer :) I wasn't aware of create-react-library which I believe includes support of CSS modules, so your import should be correct. — ikos23, Jul 15 '20 at 10:39
Have you tried to rename `switch` class into something different and check if it makes any difference? — ikos23, Jul 15 '20 at 10:40
@ikos23 you shouldn't have deleted the question, may someone find it helpful! yeah, I tried but still doesn't work, thanks! — Ericgit, Jul 15 '20 at 10:43
Check if this helps - https://stackoverflow.com/questions/54627028/jest-unexpected-token-when-importing-css?noredirect=1&lq=1 — Arpitha Chandrashekara, Jul 15 '20 at 10:45
Also, consider investigating `transform` with `jest-transform-css` [as mentioned here](https://github.com/facebook/jest/issues/3094#issuecomment-431564037). — Andrey Tyukin, Jul 15 '20 at 22:54

score 2 · Accepted Answer · answered Jul 18 '20 at 11:34

So, I'm gonna answer it myself after researching found the solution. by default jest don't know how to handle the CSS file, we need CSS module mock for jest, for that, we need to create a bridge between Webpack and Jest, this is how moduleNameMapper comes to play the bridge role, we just need to install the identity-obj-proxy to create a mock CSS Module that returns the expected CSS className like <div className={classes.div}>.

Let's install the proxy:

yarn add identity-obj-proxy

// NPM
npm install identity-obj-proxy

create a file on root / directory not src, named jest.config.js and put the beneath code:

module.exports ={
  moduleNameMapper: {
    "\\.css$": "identity-obj-proxy",
  },
};

Resource

Jest encountered an unexpected token in typescript

1 Answers1