cypress.jsonが使えない？！

最近フロントエンドの勉強でe2eテストに触れる機会があったのですが、その時に触れたのがCypress。Reactを使っているのでbaseURLを設定しようとしました。
しかし、2021年の情報を見ても「cypress.jsonなんでファイルないぞ…？」となっており混乱。
調べてみたら、案の定大型アップデートによりいろんなことが変わってました。

ここでは説明しませんが、ファイル構造も変わってるぽいです。今まで使ってた人ほど混乱しそうなので、公式のアップデートログを翻訳してくれた下記記事をさくっと見るといいと思います。

Cypress v10変更点概要

cypress.configファイルでbaseURLを設定する

さて本題。baseURLは、アップデートにより現れたcypress.configファイルで設定する模様。
もしcypress.configファイルについて情報がほしい場合、下記公式リファレンスを自分で読んでください。

cypress.configファイルについて

ちなみに、ver10にはCypress.configというコードがある模様。上で「ファイル」までコードとしてくくっていたのはそのため。
頭文字が大文字かどうかでも区別できますが、とてもまぎわらしい。
コードについてのリンクはこちら。

ファイルの位置

v10以降のCypressは、初めて起動するとcypress.configファイルが生成されます。自分はJavascriptアプリなのでcypress.config.jsがルートフォルダに生成されていました。この後に生成するcypressフォルダの中ではないので注意。

baseURLの書き方

cypress.config.jsにて、

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

何も設定していないならこのようなコードが書かれているはず。
今回、reacty-create-appを利用したReact環境では、以下のように設定します。

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
+   baseUrl: `http://localhost:3000`,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

基本的にe2eテストの設定は、cypress.config.jsのe2eの中で行うようにしてくださいと、公式リファレンスに記載されていました。
それにならい、baseURLをe2eの中に記入。
これでbaseURLの設定は完了です。

baseURL以外にもどんな設定ができるか知りたいなら下記リファレンスをどうぞ。
e2eの設定項目一覧へ飛びます。

ちゃんと動くか確認

コードは正しく動くことを確認しましょう。
というわけで、React-create-appで作成した初期React環境にて、ローカルサーバーを立ち上げて、簡単なe2eテストするところまで書きます。

新規e2eテスト作成

まずはテストを作成します。cypress openでCypressを起動して、e2eテストの画面まで移ります。

cypressファイルを作成していない場合、色々聞かれた後、以下のような画面が出ると思います。
新規作成をしたいので、右をクリックします。
左はサンプルコードを書き出してくれるものなので、初めての人は目を通しておくといいでしょう。

もうサンプルなどを作成している（もしくはさっきの画面でサンプルが欲しいから左をクリックした）人は、処理が終わった後に、青い「+ New spec」というボタンをクリックしましょう。上記画面と同じものが出てきます。

テストの名前を決めます。specと書かれている場所がこのプログラムの名前です。自由に変更してください。
できたら「Create spec」をクリック。

ここまでくればファイルの作成は完了です。

プログラムの書き変え

作成したファイルを書き変えて、baseURLを使ってローカルサーバーにつなげられるようにします。
とはいえ、やることは簡単。先ほど作成したファイルの中身のcy.visit()の中身を、以下のように書き変えるだけ。

- cy.visit('https://example.cypress.io')
+ cy.visit('/')

これでbaseURLに指定したURLへ飛んでくれます。

ローカルサーバーを起動して、Cypressのテストを実行

ここまで出来たら、Reactのローカルサーバーを起動しましょう。
yarn startなど、いつも使っている方法で大丈夫です。

ローカルサーバーを起動したら、別のコマンドプロンプト（ターミナル）を立ち上げて、Cypressのe2eテストを起動します。
ローカルサーバーを立ち上げたコマンドプロンプトで操作してしまうと、ローカルサーバーが終了してしまいます。新しいコマンドプロンプトを開き、Cypressを起動してください。
（自分がこれ以外の方法を知らないので、他にいい方法があるかもしれません）

あとは、作成したファイルをクリックすれば、テストが始まります。

上記画面のようになっていればOKです。お疲れさまでした。

おわりに

ごく最近のアップデートでかなり変わっており、特に設定関係は沼にはまるとしんどいので、腰を据えて書きました。
初心者の助けになると幸いです。

~~これを機にCypress ver10の情報が増えると良いな~~