為 Cypress 指定 tsconfig.json 位置

Question

我正在嘗試使用帶 Typescript 的 Cypress，但 Cypress 找不到我為其創建的tsconfig.json文件。 我還有一個自定義目錄結構（因為我討厭根目錄中有一堆配置文件，所以我將它們放在一個配置目錄中）。

項目目錄結構

/
├── package.json
├── configs/
│   ├── cypress.json
├── src/
│   ├── cypress/
│   │   ├── tsconfig.json

賽普拉斯打開命令

//  package.json

"scripts": {
    "cypress:open": "cypress open --config-file configs/cypress.json"
},

在上面的腳本中，--config --config-file標志告訴 cypress cypress.json配置文件的位置，這非常棒，因為我可以將該文件放在任何我想要的地方。 但是，現在我需要指示賽普拉斯在哪里可以找到它的tsconfig.json文件。

/configs/cypress.json （告訴賽普拉斯cypress/目錄在哪里）

{
  "fixturesFolder": "src/cypress/fixtures",
  "integrationFolder": "src/cypress/integration",
  "pluginsFile": "src/cypress/plugins/index.js",
  "screenshotsFolder": "src/cypress/screenshots",
  "videosFolder": "src/cypress/videos",
  "supportFile": "src/cypress/support/index.js"
}

// is there no option to set tsconfig.json path????

官方文檔說只要把它放在cypress/目錄下即可。 根據文檔，它應該位於/cypress/tsconfig.json ，但在我的項目中它位於/src/cypress/tsconfig.json 。

這是我嘗試放置tsconfig.json文件的位置：

/src/cypress/tsconfig.json //Error: "Couldn't find tsconfig.json. tsconfig-paths will be skipped"

/src/tsconfig.json //Error: "Couldn't find tsconfig.json. tsconfig-paths will be skipped"

/cypress/tsconfig.json //Error: "Couldn't find tsconfig.json. tsconfig-paths will be skipped"

/tsconfig.json // Works!! But not where I want this file to live...

我如何指示賽普拉斯在哪里尋找我想要它使用的 tsconf.json 文件？ cypress.json配置文件中是否有一個選項，或者我可以使用的 CLI 標志？？？？

我不想讓雜項配置文件弄亂我的項目根目錄，實際上我的項目和測試套件有單獨的 tsconfig 文件。 明確設置文件路徑會很棒。

Answer 1

雖然這不是您想聽到的答案，但tsconfig.json將目錄標記為打字稿項目的根目錄，就像package.json將目錄標記為 node.js 項目的根目錄一樣。 這些文件可幫助 IDE 等工具了解您的項目。

在我看來，當您開始將package.json放在其他文件夾中時，您應該只考慮移動tsconfig.json 。

另見：https ://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 2

請參閱賽普拉斯真實世界應用程序，這是一個支付應用程序，用於演示賽普拉斯測試方法、模式和工作流程的實際使用情況。

它是用 create-react-app 和 TypeScript 構建的。 用於 Cypress 的tsconfig.json位於cypress目錄中。

您可能需要配置一個根 tsconfig.json並從cypress tsconfig.json擴展它，就像在 RWA 中所做的那樣。

// cypress/tsconfig.json
{
  "extends": "../tsconfig.json",
  // ...
}

Answer 3

試試這個命令是否有效：

//CD to the space you want your .tsconfig 
    cd project_config  
     
  // Create .tsconfig   
     tsc --init  
    
  // Specify were you want to run your tsconfig file from
     tsc -p /path/to/folder/with/tsconfig 

Answer 4

這可以在沒有根級別tsconfig的情況下實現。 這個想法是我們可以在運行打開命令cd進入我們的測試文件夾：

使用以下文件結構，您的test命令將如下所示：

cd ./src/cypress && cypress open --config-file ../../configs/cypress.json

/
├── package.json
├── configs/
│   ├── cypress.json
├── src/
│   ├── cypress/
│   │   ├── tsconfig.json

請務必更新cypress.json中的支持路徑等，它們現在將相對於src/cypress

Answer 5

您的cypress文件夾應該位於包含src文件夾的同一目錄中，而不是在src文件夾中。 此外，您的cypress.config.ts文件應位於同一根文件夾中。

然后，您應該有一個如下所示的./cypress/tsconfig.json ：

{
  "extends": "../tsconfig.json",
  "files": [
    "**/*.ts",
    "../cypress.config.ts"
  ],
  "compilerOptions": {
    "sourceMap": false,
    "types": ["cypress", "chai"]
  }
}