取笑意料之外的令牌

Question

我在一个项目上运行yarn test，并得到以下错误：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as a11yDark } from './a11y-dark';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import React, { PureComponent } from "react";
      2 | import SyntaxHighlighter from "react-syntax-highlighter";
    > 3 | import { idea } from "react-syntax-highlighter/dist/esm/styles/hljs";

我的tsconfig.json如下：

  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ]
}

我使用的是ts-jest，我的jest.config.js设置为：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

还有我的package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "14.15.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.8.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@types/jest": "26.0.15",
    "@types/node": "14.14.7",
    "@types/node-fetch": "^2.5.7",
    "@types/react": "17.0.0",
    "@types/react-dom": "17.0.0",
    "@types/react-router-dom": "5.1.6",
    "@types/react-syntax-highlighter": "13.5.0",
    "bootstrap": "^4.5.3",
    "hydrogen": "0.2.0",
    "node-fetch": "^2.6.1",
    "react": "17.0.1",
    "react-app-polyfill": "2.0.0",
    "react-dom": "17.0.1",
    "react-ga": "3.3.0",
    "react-markdown": "5.0.3",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.1",
    "react-syntax-highlighter": "15.3.1",
    "tslint": "^6.1.3",
    "typescript": "4.1.2",
    "url-search-params-polyfill": "8.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "tsc --noEmit -p . && react-scripts test --all",
    "eject": "react-scripts eject",
    "lint": "tslint --project ."
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/enzyme": "^3.10.8",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "^1.15.5"
  }
}

不太确定我在这里做错了什么，我试着配置了玩笑和类型记录，但是我没有得到任何结果。

Answer 1

答案是将模块导入为commonjs而不是esm，如：

import idea from "react-syntax-highlighter/dist/cjs/styles/hljs/idea";