react+自動テスト環境のテンプレートリポジトリを作る

はじめに

フロントエンドの自動テストまわりの記事を書くことが増えてきたので、 react + 自動テストのテンプレートリポジトリを作ろうと思い至りました。

また、毎回環境構築から開始すると記事を書くことのハードルが高くなるので、テンプレートを活用してさらに記事の記事の更新頻度を高められたらと思います。

テンプレートリポジトリとは

既存のリポジトリをテンプレート化して、あなたや他の人が、同じディレクトリ構造、ブランチ、ファイルを持つ新しいリポジトリ作成できるようにできる GitHub の機能です。

リポジトリの紹介

今回作成したテンプレートリポジトリは以下のライブラリを使用しており、 フロントエンドの開発環境および、自動テスト環境を備えています。

{
  "react": "^18.2.0",
  "typescript": "^5.0.2",
  "vite": "^4.4.5",
  "vitest": "^0.34.6",
  "@testing-library/react": "^14.0.0",
  "@testing-library/react-hooks": "^8.0.1",
  "@testing-library/user-event": "^14.5.1",
  "axios": "^1.5.1",
  "msw": "^1.3.2",
  "eslint": "^8.45.0",
}

テンプレートリポジトリの作成

テンプレートリポジトリの作成方法はとても簡単で、 GitHub 上でテンプレート化したいリポジトリのヘッダーから Settings を選択します。

Template repository のチェックボックスにチェックを入れればテンプレート化できます。

テンプレートリポジトリを使う

使用したいテンプレートのリポジトリへアクセスし、 Use this template を選択します。

GitHub Cli を使う場合は --template <repository> とコマンド入力すれば　GitHub 上にテンプレートを元にしたリポジトリを作成できます。

例として、今回私が作成したテンプレートリポジトリを使う場合は以下のコマンドになります。

$ gh repo create my-repo --private --template https://github.com/diskszk/react-testing-boilerplate.git