I am using CRA (react-scripts v2.1.7) with craco v3.5 in a monorepo. I am using jest with testing-library/react. Whenever I run my tests, I get the error as

 Details:

    /Users/shivangi/Desktop/spr-messenger-client/packages/web/src/chat-app/components/message.spec.tsx:14
        react_2.render(<message_1.default>{testMessage}</message_1.default>);
                       ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (../../node_modules/jest-runtime/build/script_transformer.js:403:17)

I have jsx: "react" in my tsconfig tsconfig:

{
  "extends": "./tsconfig.paths.json",
  "baseUrl": "src",
  "compilerOptions": {
    "rootDir": "src",
    "target": "es5",
    "lib": [
      "es6",
      "dom",
      "es2018.promise"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "suppressImplicitAnyIndexErrors": true,
    "plugins": [
      {
        "name": "typescript-styled-plugin"
      }
    ],
    "noEmit": true
  },
  "include": [
    "src",
    "internals/jest/setup.ts"
  ]
}

Package.json:

{
  "name": "@sprinklr/chat-web-client",
  "version": "0.1.0",
  "dependencies": {
    "@emotion/core": "^10.0.5",
    "@emotion/styled": "^10.0.5",
    "@sentry/browser": "^5.8.0",
    "@sentry/integrations": "^5.8.0",
    "@sprinklr/chat-constants": "2.0.0",
    "@sprinklr/chat-entities": "2.0.0",
    "@sprinklr/chat-utils": "2.0.0",
    "@sprinklr/rest-client": "2.0.0",
    "azure-storage": "^2.10.3",
    "bluebird": "^3.4.0",
    "classnames": "^2.2.6",
    "core-js": "^3.0.1",
    "emotion": "^10.0.2",
    "emotion-theming": "^10.0.5",
    "formik": "^1.3.2",
    "immutability-helper": "^2.8.1",
    "jstz": "^2.1.1",
    "lodash": "^4.17.4",
    "polished": "^2.3.0",
    "prop-types": "^15.5.7",
    "react": "^16.8.6",
    "react-autosize-textarea": "^6.0.0",
    "react-dom": "^16.8.6",
    "react-frame-component": "^4.0.2",
    "react-redux": "7.2.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.7",
    "react-transition-group": "^2.5.3",
    "react-use": "^14.1.1",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.1",
    "reselect": "^4.0.0",
    "scriptjs": "^2.5.8",
    "shortid": "^2.2.14",
    "styled-system": "^3.0.2",
    "typesafe-actions": "^2.0.4",
    "validate.js": "^0.13.1"
  },
  "scripts": {
    "precommit": "pretty-quick --staged",
    "start": "sh internals/build/build-packages.sh && craco start --workspace",
    "prebuild": "NODE_ENV=production babel-node internals/build/tools/run prebuild",
    "build": "sh internals/build/build.sh",
    "analyze": "source-map-explorer build/static/js/main.*",
    "eject": "react-scripts eject",
    "docz:dev": "docz dev",
    "docz:build": "docz build",
    "static": "NODE_ENV=production babel-node internals/build/tools/run static/index",
    "widget": "NODE_ENV=production babel-node internals/build/tools/run widget/index",
    "i18n": "sh internals/i18n/index.sh",
    "lint": "eslint src",
    "format": "npm run prettier -- --write",
    "prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
    "validate": "npm run lint && npm run prettier -- --list-different",
    "test": "craco test --workspace --env=jsdom",
    "test-watch": "npm run test -- --watch",
    "test-coverage": "npm run test -- --coverage",
    "test-update": "npm run test -- --updateSnapshot"
  },
  "devDependencies": {
    "@babel/cli": "7.2.3",
    "@babel/core": "7.2.2",
    "@babel/node": "7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@craco/craco": "^3.5.0",
    "@emotion/babel-preset-css-prop": "^10.0.7",
    "@sprinklr/chat-types": "2.0.0",
    "@testing-library/jest-dom": "4.2.4",
    "@testing-library/react": "^9.4.0",
    "@types/bluebird": "^3.5.26",
    "@types/classnames": "^2.2.7",
    "@types/jest": "26.0.0",
    "@types/lodash": "^4.14.118",
    "@types/node": "^11.13.7",
    "@types/react": "^16.8.14",
    "@types/react-dom": "^16.8.4",
    "@types/react-intl": "^2.3.15",
    "@types/react-redux": "^7.1.0",
    "@types/react-router": "^4.4.2",
    "@types/react-textarea-autosize": "^4.3.3",
    "@types/react-transition-group": "^2.0.15",
    "@types/redux-logger": "^3.0.6",
    "@types/scriptjs": "^0.0.2",
    "@types/shortid": "^0.0.29",
    "@types/styled-system": "^3.0.8",
    "aws-sdk": "^2.392.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-named-asset-import": "^0.2.3",
    "babel-plugin-react-intl": "^3.0.1",
    "babel-plugin-react-intl-auto": "^1.6.0",
    "babel-preset-react-app": "^7.0.0",
    "cheerio": "^1.0.0-rc.2",
    "docz": "^0.12.15",
    "eslint-plugin-prettier": "^2.6.2",
    "glob": "^7.1.2",
    "husky": "^0.14.3",
    "node-sass-chokidar": "^1.3.0",
    "prettier": "1.13.7",
    "pretty-quick": "^1.6.0",
    "react-intl": "^2.8.0",
    "source-map-explorer": "^1.5.0",
    "terser": "3.16.1",
    "ts-jest": "26.1.1",
    "tslint": "^5.11.0",
    "tslint-config-prettier": "^1.16.0",
    "tslint-react-hooks": "^1.1.0",
    "typescript": "3.4.5",
    "typescript-styled-plugin": "^0.13.0",
    "webpack-merge": "^4.1.4"
  },
  "browserslist": [
    ">1%",
    "last 4 versions",
    "Firefox ESR",
    "not ie < 11"
  ]
}

jest.config.json

// below options are needed along with react-scripts jest-config
const BaseConfig = require('../../jest.base.config.js');
module.exports = {
  ...BaseConfig,
  "setupTestFrameworkScriptFile": "<rootDir>/internals/jest/setup.ts",
  "moduleNameMapper": {
    '^@chat-app(.*)': "<rootDir>/src/chat-app$1",
  }
}

Root level jest.config.json

// using ts-jest for transformation as it will typecheck ts files unlike babel-jest(with @babel/preset-typescript) which simply transforms without any typecheck.

module.exports = {
  "transform": {
    ".js(x?)$": "../../internals/jest/babel-transformer.js",
    ".ts(x?)$": "ts-jest"
  },
  "testMatch": [
    "**/__tests__/**/*.(j|t)s?(x)",
    "**/?(*.)+(spec|test).(j|t)s?(x)"
  ],
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx"
  ],
  "testPathIgnorePatterns": ["./lib", "./node_modules/"]
}

All over the net I find the fix as jsx: "react" but in my case it is already there in tsconfig but it isn't working.

1

There are 1 answers

1
Shivangi Khandelwal On BEST ANSWER

specifying

"rootDir": "."

in my jest config solved the issue.