テストは必要

基本的に自分の行ったものを振り返る備忘録です。
より細かいテストは今後ブログを通して行っていくので今回は環境構築から簡単なテストまでとする。
最近フロントエンドのテストの本を読んでいる。
自分は今までバックエンドのテストはよく書いていたがフロントエンドは書いたことなかった。
ブログのコードもそうだがだいぶ肥大化してきているのでしっかりとテストを用いて確認する必要があると最近思っているのでこの機会に挑戦してみようと思った。

背景

この記事を書いている真っ只中だが、Vercel shipが発表されエコシステム周りがさらに拡大しつつあるので今後のためにもフロントエンドのテストもしっかりと理解していればよりバグの少ない良いプロダクトの開発に繋がると思ったため。
また、このブログでも導入してみようかと思ったが実際にやってみると他のライブラリとの依存関連の問題やAppディレクトリの導入などですぐに変更することが難しそうなので本番環境で動作しそうになったら変更していければと思っている。
振り返ってみるとこのブログのコードもなかなか肥大化しきているのでリファクタリングもしていこうと思う。

参考サイト

とりあえずappディレクトリでないものでもいいので試してみるのであればこのリンクから試してみるのが一番早いと思う。
今回自分はブログでも導入という形になると思うので、一度作成したAppディレクトリのNextjsのプロダクトに導入していこうと思う。

完成サイト

このリンクから参照できる。

手順

Nextjsのプロジェクトの作成

以前にも記事にしたがNext.jsバージョン13の本番環境での安定版が出ればAppディレクトリがファーストチョイスになると思うのでこの際にテスト関連についても学ぶ。
そしてシェルが優秀すぎる...
そして触ってみたかったapp ディレクトリも用意されているのでとても導入しやすい。
本当に便利。

$ npx create-next-app@latest
Need to install the following packages:
  create-next-app@13.4.1
Ok to proceed? (y) y
✔ What is your project named? … try-nextjs-jest
✔ Would you like to use TypeScript with this project? …  Yes
✔ Would you like to use ESLint with this project? …  Yes
✔ Would you like to use Tailwind CSS with this project? …  Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … No 
Creating a new Next.js app in ~/try-nextjs-jest.

Using npm

全く関係ないが実際にindex.tsxファイルがないのが新鮮すぎる。
また、ファイル構成に関してもとてもシンプルにまとまっている感じがしてめっちゃ好き。

こんな感じで表示できていれば成功している。

Jestの導入

このリンクから見ると手順が表示されている。
自分の環境はnext13でrustコンパイラであるためそのままライブラリをインストールする。

$ npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

そしてJest用の設定ファイルの作成

./jest.config.mjs

import nextJest from 'next/jest.js';
 
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});
 
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 
  testEnvironment: 'jest-environment-jsdom',
};
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config);

とりあえずドキュメント通りのファイルを作成してみる。
一通り設定してくれてるっぽいので助かっちゃう。
$ npm run test でテストを実行することが出来るようにスクリプトも使いしてく。

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    // 追加
     "test": "jest --watch"
    },

テストの作成

今回はドキュメント通りにルートディレクトリにテストファイルを作成するがappディレクトリ内でもいいのではとも思っているので要検討事項である。

./tests/page.test.tsx

import Home from '@/app/page';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';


describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />);

    const heading: HTMLElement = screen.getByRole('heading', {
      name: /Deploy/i,
    });

    expect(heading).toBeInTheDocument();
  });
});

このように記述していく。
これはホームコンポーネントをレンダリングしてその中のhタグ内にDeployという文字が含まれているかどうかというテストである。
公式ドキュメントではwelcome to next.jsという文字が含まれているテストとなっているが最新版のNext.jsでは含まれていないためpage.tsxのh2タグの他の文字から代入している。
また、headingというロールがあるがこれはしっかりとhタグ関連の検知という認識がなければ解決が難しくなるのでしっかりとドキュメントを読む癖をつくなければいけない。

結果

$ npm run test
 PASS  __tests__/page.test.tsx
  Home
    ✓ renders a heading (141 ms)


Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.714 

となっていれば成功である。

まとめ

フロントエンドのテスト自体も他にも非同期の部分やスナップショットなどたくさんあると思うが少しずつ行っていければいいと思う。
また、最近あまりキャッチアップすることが出来ていないので無理しない程度でキャッチアップできればと思う。
今回の記事や前の記事でNextjs13について簡単に書かせてもらったのでもしよければ説明不足や間違いがあればぜひ指摘してほしい。
supabaseで作った匿名のコメント機能があまり稼働していないのでよろしくお願いします🙇