create-react-app tsconfig.json被react-scripts测试覆盖

slhcrj9b 于 3个月前发布在 React

关注(0)|答案(6)|浏览(38)

描述bug

首先，我已经安装了这些模块：

"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.23",
"@types/node": "^12.20.11",
"@types/react": "^17.0.4",
"@types/react-dom": "^17.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.2.4",
"web-vitals": "^1.1.1"

我想要编写模块导入代码，如下所示：

import MyPage from '~/pages/MyPage'

所以，我将这段代码添加到tsconfig.json的compilerOptions中。

"baseUrl": "./",
"paths": {
  "~/*": ["./src/*"],
},

然后，当我关闭并重新打开VSCode(我认为这会触发react-scripts测试)时，tsconfig.json中的path选项被删除了。

你是否尝试恢复依赖项？

我已经多次重新安装了我的模块。

你在用户指南中搜索了哪些术语？

我找不到任何东西，但这#10178与我的问题类似。

环境

"dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.23",
    "@types/node": "^12.20.11",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.4",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start-cra": "react-scripts start",
    "build-cra": "react-scripts build",
    "test": "react-scripts test",  // <-- my issue is solved when I delete this script
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "build": "rollup -c"
  },

重现步骤

(在这里写下你的步骤：)

npx create-react-app cra-test --template typescript
通过vscode打开项目
在tsconfig.json中添加以下选项

"baseUrl": "./",
"paths": {
  "~/*": ["./src/stories/*"],
},

关闭vscode
通过vscode重新打开项目

create-react-app

来源：https://github.com/facebook/create-react-app/issues/10911

6条答案

按热度按时间

of1yzvn41#

相同的问题

赞(0）回复(0）举报 3个月前

5us2dqdw2#

同样的疑问：(

赞(0）回复(0）举报 3个月前

8hhllhi23#

这不仅仅是测试脚本，npm run start也会覆盖tsconfig。

赞(0）回复(0）举报 3个月前

xxb16uws4#

一个好的测试用例是使用es2020中的某个东西。例如，在你的tsconfig.json

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

中尝试编写以下内容：testing.test.ts

test("processes client ids correctly", () => {
   const os = 'windows and linux on x64'
   os.matchAll(/(linux|windows|darwin|x86|x64|amd64)/g)
})

你将得到以下错误：

TypeError: os.matchAll is not a function

它在非测试环境中可以正常工作，但在测试环境中会失败。类似于node模块，仅仅是.ts文件的测试文件需要在底部添加一个export {}。

赞(0）回复(0）举报 3个月前

xoshrz7s5#

我能够使用 posttest 脚本和 json 库解决这个问题。
在你的项目中安装 json 库。

npm install json

然后在你的 package.json 中添加这个脚本：

{
  "scripts": {
    ...
    "posttest": "json -I -f tsconfig.json -e 'this.compilerOptions.noEmit=false'"
    ...
  }
}

这个脚本将在测试脚本完成后覆盖 noEmit 值。

赞(0）回复(0）举报 3个月前

v9tzhpje6#

这个问题已经被自动标记为过时，因为它没有任何最近的活动。如果没有发生任何进一步的活动，它将在5天后被关闭。

赞(0）回复(0）举报 3个月前

我来回答

create-react-app tsconfig.json被react-scripts测试覆盖

描述bug

你是否尝试恢复依赖项？

你在用户指南中搜索了哪些术语？

环境

重现步骤

6条答案

相关问题

热门标签

最新问答