Zenn
Open58

Next.js プロジェクトのセットアップ

Next.js
hagiwarahagiwara

プロジェクトを作成する

npx create-next-app <プロジェクト名>
hagiwarahagiwara

TypeScrip のパッケージを追加する

yarn add --dev typescript @types/react @types/node
hagiwarahagiwara

TypeScript の型チェックをする npm scripts を追加する

package.js
"scripts": {
  ...
  "typecheck": "tsc --noEmit"
}

使い方
$ yarn typecheck

hagiwarahagiwara
  • ページコンポーネントファイルの拡張子を js → tsx に変更する
    • src/pages/_app.tsx, 同 index.tsx
  • yarn dev を実行して ts 関連のファイルを生成する
  • tsconfig.json の設定を追加・変更する
  • _app.tsx に型を追加？
hagiwarahagiwara

Prettier の追加

yarn add --dev --exact prettier
package.json
"scripts": {
  ...
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
}
.prettierrc
{
  "singleQuote": true,
  "semi": false
}
hagiwarahagiwara

GitHub Actions .github/workflows/main.yml はひとまず保留しとこうかな

hagiwarahagiwara

Chakra UI の追加

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons
hagiwarahagiwara
hagiwarahagiwara

「React Testing LibraryのcustomRenderを定義」？ 🤔

  • Setup | Testing Library

    • React Testing Library does not require any configuration to be used. However, there are some things you can do when configuring your testing framework to reduce some boilerplate. In these docs we'll demonstrate configuring Jest, but you should be able to do similar things with any testing framework (React Testing Library does not require that you use Jest).

hagiwarahagiwara

スナップショットのテストはUI が予期せず変更されていないかを確かめるのに非常に有用なツールです。

典型的なスナップショット テスト ケースでは、UI コンポーネントをレンダリングしてスナップショットを取得し、テストと一緒に保存されている参照スナップショット ファイルと比較します。
2つのスナップショットが一致しない場合テストは失敗します: 予期されない変更があったか、参照するスナップショットが新しいバージョンのUIコンポーネントに更新される必要があるかのどちらかです。

Jestにおけるスナップショットテスト
Reactコンポーネントをテストする場合には同様のアプローチをとる事ができます。 アプリケーション全体の構築が必要となるグラフィカルなUIをレンダリングする代わりに、シリアライズ可能なReactツリーの値を素早く生成するテスト用レンダラーを利用できます。

スナップショットテストとビジュアルの回帰テストの違いは何ですか？
スナップショットテストとビジュアルの回帰テストはUIをテストする２つの独立した方法であり、目的が異なります。 ビジュアルの回帰テストツールはwebページのスクリーンショットを取得して出力された画像をピクセル単位で比較します。 スナップショットテストにおいてはシリアライズされた値をテキストファイルに格納して、異なるアルゴリズムで比較します。

hagiwarahagiwara

"baseBranches": ["chore/renovate"] が無いってことかな？
ということでブランチを作っておいた
問題なければ週末に動くかな？

hagiwarahagiwara

↑ ブランチにマージされるようになってた
が、Vercel のプレビューデプロイは変わらず実行されてた
main ブランチの場合だけ実行してほしい

hagiwarahagiwara

↑ main ブランチの場合だけ実行するように設定してみた
次の更新があった時に確認する

hagiwarahagiwara

↑ View deployment から Build Logs を見てみると No such file or directory だってよ

〜
00:08:03.733  	Running "bash vercel-ignore-build-step.sh"
00:08:03.739  	bash: vercel-ignore-build-step.sh: No such file or directory
00:08:03.744  	Error: Command failed with exit code 127: bash vercel-ignore-build-step.sh
〜
hagiwarahagiwara

chore/renovate ブランチに vercel-ignore-build-step.sh のコミットをマージしてなかったのだわ
そのせいかなー 🤔

hagiwarahagiwara

マージしたら bot が動いて無事成功 🎉

〜
16:43:58.593  	Running "bash vercel-ignore-build-step.sh"
16:43:58.600  	VERCEL_GIT_COMMIT_REF: renovate/nextjs-monorepo
16:43:58.601  	🛑 - Build cancelled
16:43:58.602  	The Deployment has been canceled as a result of running the command defined in the "Ignored Build Step" setting.
16:43:59.418  	Deployment has been canceled
hagiwarahagiwara

地味にめんどくさかったけどこれで次からは大丈夫かな…？

hagiwarahagiwara

テストの様子が自動で動画に出力されるの便利だなー（↓ gif に変換したもの）

hagiwarahagiwara

Cypress Testing Library を追加する

hagiwarahagiwara
  1. パッケージをインストール
  2. 設定ファイルを編集
    • .storybook/main.ts
    • .storybook/preview.tsx
  3. Story を追加
  4. yarn storybook
hagiwarahagiwara
  1. パッケージをインストール
  2. npm scripts に追加
  3. 設定ファイル、テンプレートを追加
    • _templates/component/new/prompt.js
    • _templates/component/new/component.tsx.ejs.t
    • _templates/component/new/stories.tsx.ejs.t
  4. yarn hygen component new
hagiwarahagiwara

CSS Moduluesを使用していたり、TDDをしていたりする場合はひとつのコンポーネントを作成する際に必要なファイルがさらに増えると思うので、ぜひ導入してみてください。

なるほど

hagiwarahagiwara

ひとまずセットアップは完了かな
vercel とか止めとこ

hagiwarahagiwara

特に必要ないと思うので Vercel 上のプロジェクトを削除した