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.
specifying
"rootDir": "."
in my jest config solved the issue.