title: SyntaxError: Unexpected token < at ScriptTransformer._transformAndBuildScript (../../node_modules/jest-runtime/build/script_transformer.js
body: <p>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</p>
  <pre><code> Details:
  
      /Users/shivangi/Desktop/spr-messenger-client/packages/web/src/chat-app/components/message.spec.tsx:14
          react_2.render(&lt;message_1.default&gt;{testMessage}&lt;/message_1.default&gt;);
                         ^
  
      SyntaxError: Unexpected token &lt;
  
        at ScriptTransformer._transformAndBuildScript (../../node_modules/jest-runtime/build/script_transformer.js:403:17)
  </code></pre>
  <p>I have jsx: &quot;react&quot; in my tsconfig
  tsconfig:</p>
  <pre><code>{
    &quot;extends&quot;: &quot;./tsconfig.paths.json&quot;,
    &quot;baseUrl&quot;: &quot;src&quot;,
    &quot;compilerOptions&quot;: {
      &quot;rootDir&quot;: &quot;src&quot;,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;es6&quot;,
        &quot;dom&quot;,
        &quot;es2018.promise&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;importHelpers&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;suppressImplicitAnyIndexErrors&quot;: true,
      &quot;plugins&quot;: [
        {
          &quot;name&quot;: &quot;typescript-styled-plugin&quot;
        }
      ],
      &quot;noEmit&quot;: true
    },
    &quot;include&quot;: [
      &quot;src&quot;,
      &quot;internals/jest/setup.ts&quot;
    ]
  }
  </code></pre>
  <p>Package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;@sprinklr/chat-web-client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;dependencies&quot;: {
      &quot;@emotion/core&quot;: &quot;^10.0.5&quot;,
      &quot;@emotion/styled&quot;: &quot;^10.0.5&quot;,
      &quot;@sentry/browser&quot;: &quot;^5.8.0&quot;,
      &quot;@sentry/integrations&quot;: &quot;^5.8.0&quot;,
      &quot;@sprinklr/chat-constants&quot;: &quot;2.0.0&quot;,
      &quot;@sprinklr/chat-entities&quot;: &quot;2.0.0&quot;,
      &quot;@sprinklr/chat-utils&quot;: &quot;2.0.0&quot;,
      &quot;@sprinklr/rest-client&quot;: &quot;2.0.0&quot;,
      &quot;azure-storage&quot;: &quot;^2.10.3&quot;,
      &quot;bluebird&quot;: &quot;^3.4.0&quot;,
      &quot;classnames&quot;: &quot;^2.2.6&quot;,
      &quot;core-js&quot;: &quot;^3.0.1&quot;,
      &quot;emotion&quot;: &quot;^10.0.2&quot;,
      &quot;emotion-theming&quot;: &quot;^10.0.5&quot;,
      &quot;formik&quot;: &quot;^1.3.2&quot;,
      &quot;immutability-helper&quot;: &quot;^2.8.1&quot;,
      &quot;jstz&quot;: &quot;^2.1.1&quot;,
      &quot;lodash&quot;: &quot;^4.17.4&quot;,
      &quot;polished&quot;: &quot;^2.3.0&quot;,
      &quot;prop-types&quot;: &quot;^15.5.7&quot;,
      &quot;react&quot;: &quot;^16.8.6&quot;,
      &quot;react-autosize-textarea&quot;: &quot;^6.0.0&quot;,
      &quot;react-dom&quot;: &quot;^16.8.6&quot;,
      &quot;react-frame-component&quot;: &quot;^4.0.2&quot;,
      &quot;react-redux&quot;: &quot;7.2.0&quot;,
      &quot;react-router&quot;: &quot;^4.3.1&quot;,
      &quot;react-router-dom&quot;: &quot;^4.3.1&quot;,
      &quot;react-scripts&quot;: &quot;2.1.7&quot;,
      &quot;react-transition-group&quot;: &quot;^2.5.3&quot;,
      &quot;react-use&quot;: &quot;^14.1.1&quot;,
      &quot;redux&quot;: &quot;^4.0.0&quot;,
      &quot;redux-logger&quot;: &quot;^3.0.6&quot;,
      &quot;redux-saga&quot;: &quot;^1.0.1&quot;,
      &quot;reselect&quot;: &quot;^4.0.0&quot;,
      &quot;scriptjs&quot;: &quot;^2.5.8&quot;,
      &quot;shortid&quot;: &quot;^2.2.14&quot;,
      &quot;styled-system&quot;: &quot;^3.0.2&quot;,
      &quot;typesafe-actions&quot;: &quot;^2.0.4&quot;,
      &quot;validate.js&quot;: &quot;^0.13.1&quot;
    },
    &quot;scripts&quot;: {
      &quot;precommit&quot;: &quot;pretty-quick --staged&quot;,
      &quot;start&quot;: &quot;sh internals/build/build-packages.sh &amp;&amp; craco start --workspace&quot;,
      &quot;prebuild&quot;: &quot;NODE_ENV=production babel-node internals/build/tools/run prebuild&quot;,
      &quot;build&quot;: &quot;sh internals/build/build.sh&quot;,
      &quot;analyze&quot;: &quot;source-map-explorer build/static/js/main.*&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;,
      &quot;docz:dev&quot;: &quot;docz dev&quot;,
      &quot;docz:build&quot;: &quot;docz build&quot;,
      &quot;static&quot;: &quot;NODE_ENV=production babel-node internals/build/tools/run static/index&quot;,
      &quot;widget&quot;: &quot;NODE_ENV=production babel-node internals/build/tools/run widget/index&quot;,
      &quot;i18n&quot;: &quot;sh internals/i18n/index.sh&quot;,
      &quot;lint&quot;: &quot;eslint src&quot;,
      &quot;format&quot;: &quot;npm run prettier -- --write&quot;,
      &quot;prettier&quot;: &quot;prettier \&quot;**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\&quot;&quot;,
      &quot;validate&quot;: &quot;npm run lint &amp;&amp; npm run prettier -- --list-different&quot;,
      &quot;test&quot;: &quot;craco test --workspace --env=jsdom&quot;,
      &quot;test-watch&quot;: &quot;npm run test -- --watch&quot;,
      &quot;test-coverage&quot;: &quot;npm run test -- --coverage&quot;,
      &quot;test-update&quot;: &quot;npm run test -- --updateSnapshot&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;7.2.3&quot;,
      &quot;@babel/core&quot;: &quot;7.2.2&quot;,
      &quot;@babel/node&quot;: &quot;7.2.2&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.3.1&quot;,
      &quot;@craco/craco&quot;: &quot;^3.5.0&quot;,
      &quot;@emotion/babel-preset-css-prop&quot;: &quot;^10.0.7&quot;,
      &quot;@sprinklr/chat-types&quot;: &quot;2.0.0&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.4.0&quot;,
      &quot;@types/bluebird&quot;: &quot;^3.5.26&quot;,
      &quot;@types/classnames&quot;: &quot;^2.2.7&quot;,
      &quot;@types/jest&quot;: &quot;26.0.0&quot;,
      &quot;@types/lodash&quot;: &quot;^4.14.118&quot;,
      &quot;@types/node&quot;: &quot;^11.13.7&quot;,
      &quot;@types/react&quot;: &quot;^16.8.14&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.8.4&quot;,
      &quot;@types/react-intl&quot;: &quot;^2.3.15&quot;,
      &quot;@types/react-redux&quot;: &quot;^7.1.0&quot;,
      &quot;@types/react-router&quot;: &quot;^4.4.2&quot;,
      &quot;@types/react-textarea-autosize&quot;: &quot;^4.3.3&quot;,
      &quot;@types/react-transition-group&quot;: &quot;^2.0.15&quot;,
      &quot;@types/redux-logger&quot;: &quot;^3.0.6&quot;,
      &quot;@types/scriptjs&quot;: &quot;^0.0.2&quot;,
      &quot;@types/shortid&quot;: &quot;^0.0.29&quot;,
      &quot;@types/styled-system&quot;: &quot;^3.0.8&quot;,
      &quot;aws-sdk&quot;: &quot;^2.392.0&quot;,
      &quot;babel-plugin-lodash&quot;: &quot;^3.3.4&quot;,
      &quot;babel-plugin-named-asset-import&quot;: &quot;^0.2.3&quot;,
      &quot;babel-plugin-react-intl&quot;: &quot;^3.0.1&quot;,
      &quot;babel-plugin-react-intl-auto&quot;: &quot;^1.6.0&quot;,
      &quot;babel-preset-react-app&quot;: &quot;^7.0.0&quot;,
      &quot;cheerio&quot;: &quot;^1.0.0-rc.2&quot;,
      &quot;docz&quot;: &quot;^0.12.15&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^2.6.2&quot;,
      &quot;glob&quot;: &quot;^7.1.2&quot;,
      &quot;husky&quot;: &quot;^0.14.3&quot;,
      &quot;node-sass-chokidar&quot;: &quot;^1.3.0&quot;,
      &quot;prettier&quot;: &quot;1.13.7&quot;,
      &quot;pretty-quick&quot;: &quot;^1.6.0&quot;,
      &quot;react-intl&quot;: &quot;^2.8.0&quot;,
      &quot;source-map-explorer&quot;: &quot;^1.5.0&quot;,
      &quot;terser&quot;: &quot;3.16.1&quot;,
      &quot;ts-jest&quot;: &quot;26.1.1&quot;,
      &quot;tslint&quot;: &quot;^5.11.0&quot;,
      &quot;tslint-config-prettier&quot;: &quot;^1.16.0&quot;,
      &quot;tslint-react-hooks&quot;: &quot;^1.1.0&quot;,
      &quot;typescript&quot;: &quot;3.4.5&quot;,
      &quot;typescript-styled-plugin&quot;: &quot;^0.13.0&quot;,
      &quot;webpack-merge&quot;: &quot;^4.1.4&quot;
    },
    &quot;browserslist&quot;: [
      &quot;&gt;1%&quot;,
      &quot;last 4 versions&quot;,
      &quot;Firefox ESR&quot;,
      &quot;not ie &lt; 11&quot;
    ]
  }
  </code></pre>
  <p>jest.config.json</p>
  <pre><code>// below options are needed along with react-scripts jest-config
  const BaseConfig = require('../../jest.base.config.js');
  module.exports = {
    ...BaseConfig,
    &quot;setupTestFrameworkScriptFile&quot;: &quot;&lt;rootDir&gt;/internals/jest/setup.ts&quot;,
    &quot;moduleNameMapper&quot;: {
      '^@chat-app(.*)': &quot;&lt;rootDir&gt;/src/chat-app$1&quot;,
    }
  }
  
  </code></pre>
  <p>Root level jest.config.json</p>
  <pre><code>// 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 = {
    &quot;transform&quot;: {
      &quot;.js(x?)$&quot;: &quot;../../internals/jest/babel-transformer.js&quot;,
      &quot;.ts(x?)$&quot;: &quot;ts-jest&quot;
    },
    &quot;testMatch&quot;: [
      &quot;**/__tests__/**/*.(j|t)s?(x)&quot;,
      &quot;**/?(*.)+(spec|test).(j|t)s?(x)&quot;
    ],
    &quot;moduleFileExtensions&quot;: [
      &quot;ts&quot;,
      &quot;tsx&quot;,
      &quot;js&quot;,
      &quot;jsx&quot;
    ],
    &quot;testPathIgnorePatterns&quot;: [&quot;./lib&quot;, &quot;./node_modules/&quot;]
  }
  </code></pre>
  <p>All over the net I find the fix as jsx: &quot;react&quot; but in my case it is already there in tsconfig but it isn't working.</p>