vscodeでcypressのintellisenseが見れない問題

テスト環境

• node: 18.15.0
• yarn: 4.0.0-rc.42
• cypress: 12.9.0
• vscode: 1.77.0
• ubuntu: 20.04.6 LTS
• volta: 1.1.1

解決方法

• IDE Integration (Cypress公式ドキュメント)

  • この方法だとうまくいかなかったので、以下のようにする

• /// <reference path="../../.yarn/unplugged/cypress-npm-12.9.0-0c9e067ccc/node_modules/cypress/types/index.d.ts" />を一行目に入れる

  • pathは適宜変更することnode_modules/cypress/types/index.d.tsがあってればよい

原因

• types="Cypress"はnode_module/@cypressに頼った方法だが、yarnではnode_moduleフォルダが生成されないので、この方法は使えない
• 直接、型定義ファイルであるindex.d.tsへのパスを指定してあげる

その他

• これはnode_moduleを生成しないyarnで発生する問題であり、npmでは問題なくintellisenseが使える
• /// <reference ... />はTypeScriptのものらしい
  • Triple-Slash Directives (TypeScript)

再現手順

1. 以下のコマンドを実行
   first.sh

   yarn create react-app my-app
   cd my-app
   volta pin node@18.15.0
   volta pin yarn@4.0.0-rc.42
   yarn add cypress --dev
   yarn run cypress open
   

2. Cypressの初回セットアップを行う
   1. 左の「E2E Testing」を選択
   2. Configuration filesの画面ですべてにチェックが入っていることを確認して、Continueをクリック
   3. Choose a browserの画面でChromeを選択
   4. Create your first specの画面で「Create new spec」を選択
   5. ファイル名はデフォルトのまま「Create spec」をクリック
   6. 「Great! The spec was successfully added」が表示されたら、いったんブラウザを閉じてCypressのサーバーを閉じる
3. 以下のコマンドで新規ファイルを作成して、vscodeを開く
   second.sh

   touch cypress/e2e/first.cy.js
   code .
   

4. describeと打ってみてもintellisense（予測変換みたいなもの）が出てこないのが確認できる
5. 公式ドキュメントに従って、一行目に/// <reference types="Cypress" />を入れる
6. describeと打ってみてもやはりintellisenseが表示されない

参考サイト

• create-react-app
  • Creating an Appを参考にしました
• Installing Cypress
  • yarn addを参考にしました
• Opening the App (Cypress)
  • cypress openを参考にしました