Cypress ver10.0.0 アップデート

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

公式ドキュメント

Changelog

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の案内通りにマイグレーション作業を行います。

continue to cypress 10というボタンを押します。

3. マイグレーション作業

ボタン押下後以下の画像のような画面になるかと思います。

Rename these specs for meと書いてあるボタンを押していくとファイルの拡張子をspec→cyにしてくれたり、cypress.jsonをcypress.config.js or tsに自動的に変換してくれます。
これが全て終わると以下の画像のような画面になるかと思います。

私の場合はこの段階でE2Eテストが実行できました。ただし、画像のようにコンポーネントテストがまた実行できないため、設定していきます。

4.コンポーネントテストの設定、設定ファイルの修正

私の場合はコンポーネントテストのテストファイルの拡張子が3の段階で自動的に変換されていなかったので、まずspec→cyに変更します。
次に3の最後の画像のComponent Testingをクリックします。すると以下の画像のようになるかと思います。

ここはご自身のプロジェクトのフレームワークを選択して下さい。選択後以下の画像のようになります。

devServerオプションはコンポーネントテストの設定の中で必須オプションのため、画像のdevServerの部分をコピーして、configファイルのcomponentオブジェクトの中にペーストしてください。configファイルを修正後、cypressを再起動します。

すると先ほど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を試してみたください。自分の場合はこちらのコマンドで解決しました。