🦏

Next.js でCypressを試す

2022/12/31に公開

はじめに

フロントエンドのテストについて気になっていたものの、
中々キャッチアップできずにいました。
今回年末で時間ができたので、
Next.jsのTestingに沿って、
Cypressをを試していきたいと思います。

セットアップ

まずはNext.jsとCypressのセットアップをしていきます。
0から作る場合は下記のコマンドで作成できます。

npx create-next-app@latest --example with-cypress with-cypress-app

実行するとcypress というディレクトリが作成されてました。

既存のプロジェクトに追加する場合は、下記コマンドでモジュールをインストールします。

npm install --save-dev cypress

package.jsonにもcypress openを追加しておきます。

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
+  "cypress": "cypress open",
}

Cypressの設定

テスト実行の前にCypressの設定を行います。
cypress openでCypressの設定画面を立ち上げます。(2回目以降はGUIでテストが実行されます。)

npm run cypress

画面の指示に沿って登録を進めます。
登録完了後、再度選択したブラウザ画面より、「Runs」タブを開きます。

画面下部のボタンより、プロジェクトを接続します。

プロジェクトキーが発行されるので、コピーし、package.jsonに追記します。

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "cypress": "cypress open",
+    "cypress:headless": "cypress run --record --key xxxxx-xxxxx-xxxxx",
},

※確認したところ、--record --key xxxxx-xxxxx-xxxxxはなくても実行可能でした。

テストの実行

追加したcypress runコマンドより、CLIでテストを実行します。(GUIでのテストはcypress open)

npm run cypress:headless

// 実行結果
> cypress:headless
> cypress run --record --key xxxx-xxxx-xxxx

Missing baseUrl in compilerOptions. tsconfig-paths will be skipped

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.3.1                                                                         │
  │ Browser:        Electron 100 (headless)                                                        │
  │ Node Version:   v18.10.0 (/Users/xxxxxxx/.nodebrew/node/v18.10.0/bin/node)              │
  │ Specs:          1 found (app.cy.ts)                                                            │
  │ Searched:       cypress/e2e/**/*.cy.{js,jsx,ts,tsx}                                            │
  │ Params:         Tag: false, Group: false, Parallel: false                                      │
  │ Run URL:        https://cloud.cypress.io/projects/xxxxxx/runs/1                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  app.cy.ts                                                                       (1 of 1)


  Navigation
    1) should navigate to the about page


  0 passing (711ms)
  1 failing

  1) Navigation
       should navigate to the about page:
     CypressError: `cy.visit()` failed trying to load:

すると、テストが失敗しました。

Missing baseUrl in compilerOptions. tsconfig-paths will be skipped

とあるので、プロジェクト直下のtsconfig.jsonにbaseUrlを追記します。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
+    "baseUrl": "./"
  },

再度テストを実行すると、今度は成功しました。

(省略)
  Running:  app.cy.ts                                                                       (1 of 1)
  Estimated: 0 seconds


  Navigation
    ✓ should navigate to the about page (2196ms)


  1 passing (2s)


  (Results)
  
(省略)

cypress/videos/app.cy.ts.mp4に、テスト実行時の録画が保存されてました。
どんな挙動をしたのか保存しておけるのは非常に便利ですね！

おわりに

Next.jsでCypressを試してみました。
Cypressの詳しいメソッドや、コマンド、ディレクトリ構成などについては、
機会があれば別途記事にしたいと思います。
また、調べていくうちにビジュアルリグレッションテストと言うものを見つけたので、
そちらも別途記事にしたいと思います。

参考

https://nextjs.org/docs/testing#cypress