tsconfig.json overwitten by react-scripts test

[joonseokhu]

Describe the bug

First of all, I've installed theese modules:

"@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"

I wanted to write module import code like this

import MyPage from '~/pages/MyPage'

So, I add this code to compilerOptions of tsconfig.json

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

And I found out that the path alias is working fine.

Then, When I closed and reopen the VSCode, (which triggers react-scripts test, I think)
the path option of tsconfig.json is removed.

Did you try recovering your dependencies?

I'v already reinstalled my modules several times.

Which terms did you search for in User Guide?

I couldn't find anyting but this #10178
which is similar issue to me.

Environment

"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"
  },

Steps to reproduce

(Write your steps here:)

1. npx create-react-app cra-test --template typescript
2. open the project via vscode
3. add following options in tsconfig.json

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

4. close vscode
5. reopen the project via vscode

Expected behavior

nothing should happen

Actual behavior

paths option is deleted in tsconfig.json

[Erchoc]

same question

[ErideDLF]

same question here :(

[duvet86]

It's not only the test script, npm run start overwrites the tsconfig as well.

[mohamedmansour]

A Good test case is to use something from the es2020. Example, in your 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"
  ]
}

Now try to write this in your test: testing.test.ts

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

You will result in this error:

    TypeError: os.matchAll is not a function

It works in non test, but in test it fails as above. Similar to node modules, test files that are just .ts files require a export {} at the bottom,

[netochaves]

I was able to solve this using a posttest script and the json lib.

Install the json lib on your project.

npm install json

then on your package.json add this script:

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

This script will override the noEmit value after the test script finish

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.