reactjs - 尝试使用 create-react-app 运行 typescript

Question

我正在使用带有 typescript 的 React 设置 Jest 。
每当我运行 npm test 时都会出现错误。

npm 测试给我以下错误:

Out of the box, Create React App only supports overriding these Jest options:

• collectCoverageFrom • coverageReporters • coverageThreshold
• snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

• transform • testRegex • moduleFileExtensions

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

我不想弹出，并且我还希望以下选项起作用
• 变换
• 测试正则表达式
• 模块文件扩展

我该怎么办？

我的package.json文件如下

 {
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jest-cli": "^22.3.0",
    "jest-enzyme": "^4.2.0",
    "react": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.13",
    "@storybook/addon-links": "^3.3.13",
    "@storybook/addon-storyshots": "^3.3.13",
    "@storybook/addons": "^3.3.13",
    "@storybook/react": "^3.3.13",
    "@types/enzyme": "^3.1.9",
    "@types/jest": "^22.1.2",
    "@types/react-dom": "^16.0.4",
    "@types/storybook__react": "^3.0.7",
    "awesome-typescript-loader": "^3.4.1",
    "babel-core": "^6.26.0",
    "enzyme": "^3.3.0",
    "jest": "^22.3.0",
    "prettier-eslint": "^8.8.1",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.2.0",
    "redux": "^3.7.2",
    "ts-jest": "^22.0.4",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.2",
    "typescript-eslint-parser": "^13.0.0"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}
`

Answer 1

In CRA 2.1 and later versions ，您应该能够在测试文件中使用 TypeScript，而无需任何特殊的 Jest 配置。只需确保您的 __tests__ 文件夹嵌套在您的 src 文件夹下，或者您的测试文件位于您的 src 文件夹中并且具有以下任意一项:以下扩展:

• .test.js
• .test.ts
• .test.jsx
• .test.tsx
• .spec.js
• .spec.ts
• .spec.jsx
• .spec.tsx