尝试使用 create-react-app 开玩笑地运行打字稿

Posted 2023-03-13

【中文标题】尝试使用 create-react-app 开玩笑地运行打字稿

【英文标题】：trying to run typescript with jest with create-react-app

【发布时间】：2018-07-27 18:01:48

【问题描述】：

我想用带有打字稿的反应来设置玩笑。 每当我运行npm test 时都会出错。

npm test 给我以下错误：

开箱即用，Create React App 仅支持覆盖这些 Jest 选项：

• collectCoverageFrom • coverageReporters • coverageThreshold • 快照序列化器。

你的 package.json Jest 配置中的这些选项不是 Create React App 目前支持：

• 转换• testRegex • moduleFileExtensions

如果您希望覆盖其他 Jest 选项，您需要从 默认设置。您可以通过运行 npm runeject 来做到这一点，但请记住 这是一种单向操作。您也可以提出问题 创建 React App 以讨论支持更多开箱即用的选项。

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

我该怎么办？？

我的 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"
    ]
  

`

【问题讨论】：

你有什么问题？

看看wmonk/create-react-app-typescript 或其中的脚本。

错误消息正确描述了您遇到的问题。

我也是。我确实弹出了。但是.......弹出...... config 已经存在于您的应用程序文件夹中。我们无法继续，因为您将丢失该文件或目录中的所有更改。请移动或删除它（也许复制一份备份）并再次运行此命令。

【参考方案1】：

In CRA 2.1 and later versions，您应该可以在测试文件中使用 TypeScript，而无需任何特殊的笑话配置。只需确保您的 __tests__ 文件夹嵌套在您的 src 文件夹下，或者您的测试文件位于您的 src 文件夹内并具有以下任何扩展名：

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