Cypress ver10.0.0 アップデート

Cypressバージョン10.0.0が2022/6/1にリリースされました。
ドキュメント読んだり、実際にアップデートしてみたりしたので、大きな変更箇所や実際のアップデート方法など書いていきます。

## 公式ドキュメント
### Changelog 
https://docs.cypress.io/guides/references/changelog#10-0-0

### Migration Guide
https://docs.cypress.io/guides/references/migration-guide


## 変更箇所
主にChangelogから主観で重要そうな箇所を和訳して、書いていきます。詳細な箇所も把握したいという方は公式ドキュメントを見てください。

#### 概要
- cypressアプリを一から作り直しました。
- コンポーネントテストがベータ版になりました。
- インターフェイスを近代化、ワークフローの合理化、開発体験全体をよりよくまとめました。

#### 重要そうな変更箇所

##### 設定ファイル拡張子の変更
- これまでcypressの設定ファイルとして、`cypress.json`を使用していたと思いますが、今回のアップデートからサポートされなくなりました。この設定ファイルを`cypress.config.js`, `cypress.config.ts`, `cypress.config.cjs` または `cypress.config.mjs` ファイルに置き換える必要があります。(後術しますが、アプデ作業の際に自動的に変更してくれます。）
- `cypress.config.js` と `cypress.config.ts` の両方のファイルを持つことはできません。Cypressのロード時にエラーになります。

##### テストファイルの拡張子の変更
- 新規プロジェクトのe2e.specPatternのデフォルト値は `cypress/e2e/**.cy.{js,jsx,ts,tsx}` となります。既存のプロジェクトでは、`cypress open` を実行して、specPattern に一致するように spec ファイルを自動的に移行してください。(後術しますが、自動的にファイルの拡張子を変更してくれます。）
- component.specPatternのデフォルト値は`**/*.cy.{js,jsx,ts,tsx}`です。
- 従来の`hogehoge.spec.{js,jsx,ts,tsx}`の形だとcypressがテストしてくれないです。

##### 設定ファイル内のオプション関係
- `baseUrl` および `experimentalSessionAndOrigin` 設定オプションは、 トップレベルの設定オプションとしては無効となり、 e2e 設定内でのみ定義できるようになりました。
- `supportFile` および `slowTestThreshold` オプションは、トップレベルの設定オプションとしては無効となり、e2eおよびcomponent の設定内で定義しなければならなくなりました。
- pluginsFileオプションは削除されました。このオプションは、新しい設定オプションである `setupNodeEvents()`および`devServer()` で置き換える必要があります。
    - `setupNodeEvents()`オプションは、新しいテストタイプ固有の設定オプションです。e2eやcomponentの設定内で定義する必要があります。このオプションは、ロードされた設定を変更したり、イベントをリッスンしたり、プラグインを登録したりすることができます。このオプションは、pluginsFileオプションの代替となるものです。
    - `devServer` オプションは、新しいコンポーネントテスト専用のオプションで、 コンポーネント設定内で定義しなければなりません。このオプションは、テスト実行時にコンポーネントテストの dev-server を起動するための仕組みです。
- `experimentalStudio`オプションは、実験的なCypress Studio機能の削除に伴い削除されました。このオプションがプロジェクトに設定されている場合、警告メッセージが表示されます。
- `ignoreTestFiles`オプションは使用されなくなり、`excludeSpecPattern`テストタイプ専用オプションに置き換わりました。

##### コマンド
- `cypress open-ct`と`cypress run-ct`コマンドは非推奨となりました。代わりに、`cypress open --component`と `cypress run --component`を使用してください。（実行時に非推奨コマンドを使用していると警告が出ます。）

##### supportファイルの変更
- 以前は、supportFileオプションのデフォルトは`cypress/support/index.js`でしたが、e2e.supportFile オプションのデフォルトは `cypress/support/e2e.{js,jsx,ts,tsx}`で、component.supportFileオプションのデフォルトは`cypress/support/component.{js,jsx,ts,tsx}`に変更されました。

##### その他
- Cypressでコンポーネント テストを開始するために必要なコンポーネント テストの依存関係のインストールとプロジェクトのセットアップが Cypressによって案内されるようになりました。以前は、手動で設定し、ドキュメントを参照する必要がありました。
- Intelligent Code Completion が `defineConfig() `ヘルパー関数で追加されました。これにより、IDE の設定ファイルにおいて、設定の自動補完とインラインドキュメンテーションが有効になります。Cypress が設定を解析することは厳密には必要ではありませんが、defineConfig() で設定オブジェクトをラップすることを推奨します。（こちらも後術しますが、自動的に設定してくれます。）
- `Cypress.Commands.add()`でカスタムの `cy.hover()` と `cy.mount()` の実装を追加できるようになりました。以前は、ユーザーはカスタム実装を提供するために`Cypress.Command.override()`を使用する必要がありました。
- `cypress open`でCypressを起動すると、エンドツーエンドテストかコンポーネントテストのどちらを行うか尋ねられ、プロジェクトのセットアップに必要な設定を行うことになります。


## アップデート手順
### 実行環境
package manager：`yarn`
| package | version |
|:-:|:-:|
| react  | 17.0.2  |
|  next | 12.1.0  |
|  webpack | 5.70.0  |
| cypress  | 9.7.0  |

### 1.yarnでアップグレード
```
$ yarn upgrade cypress@10.0.0
```

### 2.cypress openする
```
$ yarn cypress open --browser chrome
```
コマンドを打つと画像のようなブラウザが開きます。ここからは基本的にcypressの案内通りにマイグレーション作業を行います。
![スクリーンショット 2022-06-12 15.20.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681432/edc5deb8-2549-ea76-b5d1-08b69f753fe8.png)
`continue to cypress 10`というボタンを押します。

### 3. マイグレーション作業
ボタン押下後以下の画像のような画面になるかと思います。
![スクリーンショット 2022-06-12 15.24.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681432/5d2da37c-5a92-6ec1-8651-a7e94cffa075.png)
`Rename these specs for me`と書いてあるボタンを押していくとファイルの拡張子を`spec`→`cy`にしてくれたり、`cypress.json`を`cypress.config.js or ts`に自動的に変換してくれます。
これが全て終わると以下の画像のような画面になるかと思います。
![スクリーンショット 2022-06-12 15.32.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681432/c4c144f0-4cf9-76ba-f57c-7df84a75190f.png)
私の場合はこの段階でE2Eテストが実行できました。ただし、画像のようにコンポーネントテストがまた実行できないため、設定していきます。

### 4.コンポーネントテストの設定、設定ファイルの修正
私の場合はコンポーネントテストのテストファイルの拡張子が3の段階で自動的に変換されていなかったので、まず`spec`→`cy`に変更します。
次に3の最後の画像のComponent Testingをクリックします。すると以下の画像のようになるかと思います。
![スクリーンショット 2022-06-12 15.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681432/34145b47-cd44-e91f-3ad4-8109e661a5b9.png)
ここはご自身のプロジェクトのフレームワークを選択して下さい。選択後以下の画像のようになります。
![スクリーンショット 2022-06-12 15.45.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681432/0f5b2e9b-03bf-aaf2-ef0e-f9fdefb6053d.png)
`devServer`オプションはコンポーネントテストの設定の中で必須オプションのため、画像の`devServer`の部分をコピーして、configファイルのcomponentオブジェクトの中にペーストしてください。configファイルを修正後、cypressを再起動します。
![スクリーンショット 2022-06-12 15.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681432/ee4b2a70-bdfb-a8a4-688a-22de271c9724.png)
すると先ほどNot ConfiguredだったものがConfiguredになっているかと思います。
あとはコンポーネントテストファイルを少し修正します。先ほどの`cypress open`実行時におそらく`cypress/support/components.ts`が生成されていると思います。このファイル内の記述のおかげで、これまでコンポーネントテストではおそらく以下のようにimportして記述していた`mount`をimportなしで`cy.mount`だけで記述できるようになります。
```
import { mount } from '@cypress/react';

it('test', () => {
    mount(
      <hoge>text</hoge>
    );

    cy.get('[class*="test"]')
      .should('have.text', 'textr');
  });
```
↓
```
it('test', () => {
    cy.mount(
      <hoge>text</hoge>
    );

    cy.get('[class*="test"]')
      .should('have.text', 'textr');
  });
```
ドキュメントを読んだ感じだとこの変更は必須ではないように思ったのですが、この修正を加えないと、正しく動作しませんでした。
最後に、package.jsonのscriptで`cypress run-ct`コマンドを使用している方は非推奨であるため、`cypress open --component`と `cypress run --component`を使用するように修正しましょう。これでアップデート作業は終わ理、アップデート前と同じく動作しました。

#### 注意
今回アップデートしている過程で、このissueと同じようなエラーに遭遇し、コンポーネントテストがなかなか進みませんでした。
https://github.com/cypress-io/cypress/issues/20073
Nextを使用している方で、このissueと同じようなエラーに遭遇した方は、このissueに答えてくれている方のように`rm -r .next/cache`を試してみたください。自分の場合はこちらのコマンドで解決しました。