语法错误：意外的令牌<位于ScriptTransformer._transformAndBuildScript../../node_modules/jest-runtime/build/script_transformer.js

问题描述

我在monorepo中使用带有craco v3.5的CRA（反应脚本v2.1.7）。 我正在与测试库/反应开玩笑。每当我运行测试时，都会显示错误消息

 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)

我的tsconfig中有jsx：“ react” 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",}
}

根级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/"]
}

我在网上发现的修复都是jsx：“ react”，但就我而言，它在tsconfig中已经存在，但无法正常工作。

解决方法

指定

"rootDir": "."

我的玩笑配置解决了该问题。