今日は【深夜学習】と称してeasy-notion-blogのlintやtestについてチャベスさんと夜な夜なやり取りしながら理解を深めた内容を私なりに整理をしてこの記事にまとめてみようと思います。

※ スレ主はチャベスさんですm(_ _)m

文章よりスクショやツイート多めですm(_ _)m

途中途中知識がまだ浅い部分もあるので「ん！？」って感じることもあるかもしれません。

そしたらTwitterで教えて下さい。

頭の整理をするために書きなぐってみた。

静的テストとは、プログラムコードを実行せずに、ドキュメントやソースコードなどのチェックによって誤りや脆弱性を検出するテスト手法のことです。

今さら聞けない「動的テスト」「静的テスト」とは？

https://github.com/otoyo/easy-notion-blog/pull/36

🔽 Add linterのPRで行われたこと：

• eslintのプラグインをインストール
• eslintのプラグインの推奨設定をする
• 修正

特にeslintのプラグインの推奨設定をしている.eslintrc.jsonの記述を見るとESlintで何をしてるのかが分かりました。

• ルールの登録👉pluginsプロパティ パッケージ名
• 登録したルールに対する具体的なON/OFFの指定👉extendsプロパティ※ パッケージ名/指定名
  • パッケージ名：@typescript-eslint
  • 指定名：eslint-plugin
• 個別に追加したいルールを指定👉rulesプロパティ パッケージ名/指定名
  • no-unused-vars：未使用変数を使うのダメ
  • no-explicit-any：型定義をanyにするのダメ

<３つあるルールのレベル>

【参考になった記事】

• はじめてのESLint
  • 概要がよく分かった
• うわっ...私の.eslintrc、無駄が多すぎ...？
  • 実際の記述からの省略前の状態を具体的に提示してくれてる
  • 本元のパッケージを参照して何が重複しているかを追いながら整理することができた
  • 今回のrecommendedも扱っていてジャストフィット!!!
• ESLint の Plugin と Extend の違い
  • extendの謎について詳しく解説されている(今後必要になりそう)

Next.jsの基本ESLint設定と、より厳格なCore Web Vitalsルールセットが含まれています。
これは、ESLintを初めてセットアップする開発者に推奨される構成です。

https://nextjs.org/docs/basic-features/eslint

https://nextjs.org/docs/basic-features/eslint

🔽やること

• package.jsonにnext lintを追記
• yarn lint で起動

本家のコードを見てみると…..

https://github.com/otoyo/easy-notion-blog/commit/8423f4dd2a11cda131ab3434c38552fb7e45fb9b

これ、実はeasy-notion-blogリポジトリが始めにcommitされた時から存在していたようです 😱

フォーマットを修正してくれるpretterも同じ時期に存在していたことを今になって知りました….。

PRした時に３つチェック項目があって動いてくれてたあれかも〜(´・ω・`)

終わるとすぐ消えちゃうので見つけた時にスクショを追加します〜。お待ちあれ 😎

本家のPRを確認すると…..

https://github.com/otoyo/easy-notion-blog/pull/37

🔽 GitHub actionsのPRで行われたこと：

• GitHub ActionsでESLintを動かす
• GitHub Actionsでも本番環境と同じようにチェックする
• READMEにyarn lintが使えることを明記

このPRでの警告・エラーメッセージについての変更を見てみると……

サーバー(Node.js)の環境変数と本番環境が同じするように指摘していた部分を、

GitHub Actionsも追加してチェックするように変更したっていうことみたい。

シェルってターミナルのウィンドウのことだった…..

(´；ω；｀)やっと分かった……

https://docs.github.com/ja/repositories/configuring-branches-and-merges-in-your-repository/managing-branches-in-your-repository/changing-the-default-branch

隠しファイルにこんな記述があったとは….

https://github.com/otoyo/easy-notion-blog/pull/37/commits/af5d7535ab7314093a886306ce36cb0793dc5e48

さて、ここまでがESLint。

本題はここからです 🏋️‍♀️

Jest公式サイト

本家のPRを確認すると…..

https://github.com/otoyo/easy-notion-blog/pull/38

🔽 Setup JestのPRで行われたこと：

• Jestをインストール
• Jestのライブラリをインストール👉Next.js公式ドキュメントより
  • react
  • jest-dom
• Jestの設定👉Next.js公式ドキュメントより
• yarn jestで起動
  • package.jsonでscriptプロパティにlintのように追加
• GitHub ActionsでJestを動かす
  • .githubでlintのときのように記述
• __系ディレクトリの出現
  • __ test __
  • __ mock __
  • src/lib/notion/__ mock __

__mocks__と__tests__はユニットテスト関連のデータなのでお任せすればよし👯

https://nextjs.org/docs/testing

jest以外にinstallしたライブラリについて調べてみると….

https://testing-library.com/docs/react-testing-library/intro/

React Testing Libraryは、DOM Testing Libraryの上に、Reactコンポーネントを操作するためのAPIを追加して構築されています。

https://testing-library.com/docs/ecosystem-jest-dom/

jest-domはテスティングライブラリにとって連れのようなライブラリです。(へろ意訳)
Jest用のカスタムDOM要素適合を提供します。

https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler

本家を見てみると…..

https://github.com/otoyo/easy-notion-blog/pull/38/commits/06f926fccc6de0b5b751d583b8198cbb3ab00942

同じだ〜〜〜〜＼(^o^)／

今回はNODE_ENVを指定していない

確かにどこにもない。

test環境なので.env.localは読み込まれない

https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables#テスト環境変数

https://github.com/otoyo/easy-notion-blog/pull/38/files#diff-faff1af3d8ff408964a57b2e475f69a6b7c7b71c9978cccc8f471798caac2c88

先にexportしていたNEXT_PUBLIC_URL がテストの時も使われた

アルパカ先生のツイートのおさらい：

今回は NODE_ENV を指定していないのでこのデフォルト値が使われます。
test 環境なので .env.local は読み込まれず、また .env.test もなかったので読み込まれませんでした。しかしチャベスさんの場合は先に export していた NEXT_PUBLIC_URL がテストの際にも使われたということだと思います。

デフォルトが使われる予定だった….

👇

test環境では何も読み込まれる予定はなかった…..

👇

でも優先順位の高い環境変数を読み込んでしまった

👇

testで使われた

https://github.com/otoyo/easy-notion-blog/pull/2/commits/2435733799b45282be0bcebb0de2cb9e730406ce

アルパカ先生より

次の手順をやってみてください〜
(1)Vercelに登録しているNEXT_PUBLIC_URLを確認
(2)Jest を走らせているコンソールで export NEXT_PUBLIC_URL="確認したURL" を実行
(3)同じコンソールで再度 updateSnapshot する
(4)スナップショットの差分をコミットして push

snapshotは出力をスクショして確認してくれるってイメージ

今回の原因はNEXT_PUBLIC_URLだったけど、

原因をエラーメッセージから探って、

修正したら….

Jestを動かし中のシェルでyarn jest --updateSnapshot をして、

更新された差分をpushすればOK＼(^o^)／

っていうことだなってことが分かりました〜〜〜〜〜ん🎶

１周回ってこのスレッドを遡ると….

１発目のアルパカ先生の返しでもう解決している内容でした。。。。

何度も何度もアルパカ先生が言葉を変えながらコメントしてくださっていたことに

１日経って気づき、可哀想に思えてきたへろほろです😂

いや、もう笑いが止まらなくなるくらいの繰り返しのやり取りでした…..(；・∀・)すんません

ただ、開発環境と本番環境とで環境変数が切り替わっている部分やそれに加えてテスト環境とやらで【環境】【環境】【環境】【環境】……何がなんだか分からなくなってしまったのが発端で…..(´・ω・｀)

export・スナップショット・Lint・Jest・コンソール・シェルといった単語ものどごし悪いまま雰囲気で理解。

そして今度は、走らせる…..(;O;)(何が走ってるんじゃ〜となりました…)

話が噛み合っているようで噛み合っていないやりとりをしてしまって本当に申し訳ないなと思うと同時にそれに付き合ってくれたチャベスさんやアルパカ先生の偉大さに改めて気付かされるのでした…..(´・ω・｀)(；・∀・)

私なりにその後調べ、頭の中を整理してやっと記事の状態にできたのは１週間後。

出口が見えたのは八朔さんのツイートがキッカケでした。

八朔さんありがとう〜〜〜〜(´；ω；｀)

このツイートはGitのエラーを調べるためにVercelドキュメントを見返したら成功したっていう流れの一部のツイートなんだけど、他人事だともどうしても思えず私の中でずっと突っかかっていました。。。。

( ﾟдﾟ)ﾊｯ!

「ESLintとJestの設定で分からないのってVercelドキュメントにあるんじゃない！？」

と急に繋がり調べたらビンゴでした。

八朔さんありがたすぎる〜〜〜〜

夏休みの宿題をやりきった感でにんまりです☀

あースッキリ。

▼ チャベスさんのスレッドではあるもののかなり掘りまくりました…

今になって気づいたのですが、

チャベスさんのエラーが通ってめでたしめでたしな雰囲気だったところを

私が質問してしまったがゆえにどんどん掘っていった….ということに深く反省しておりますm(_ _;)m

次回からリツイートで自分のスレッドを用意してから始めたほうが良さそうですね…..😵

チャベスさんのブログでは実際にどんなことが原因になって何をしたら解決したか…

といった具体的な過程を含めて解説された記事が後日投稿されています。

同じことをテーマに記事にしたのに切り口が違うとこんなに違ったものになるのかと感動したへろほろです。

ブログってつくづく面白いなと思いました(*´ω`*)

話を戻して….

🔽 翌日自分のスレッドでモヤモヤを解消しております。

興味のある方はのぞいてみてくださいね〜〜〜〜(●´ϖ`●)

🐌 余談…..

【深夜学習】とは….

私が勝手に思い付いて先週あたりから学習スケジュールを提示しているのですが….

深夜食堂が好きなので食堂を学習に変えているだけです。(´・ω・｀)

なんかあの落ち着いた雰囲気が好きなんですよね〜🎶

１人なんだけど夜な夜なご飯食べに行く….みたいな。

深夜食堂のような落ち着いた雰囲気の【深夜】という意味もあれば

【深める】という意味にもなる学習時間にできたらいいなって思って思いつきで予告ツイートしています⭐

基本的には１人で作業中にブツブツ言ったりブックマーク投げたりする感じなんですが、

興味ある内容で同時刻に活動されている方がいるともしかすると絡みに行くかも知れません😂

(今回それがチャベスさんだった…www)

ESLintすごく楽しかったです〜〜〜〜＼(^o^)／＼(^o^)／

ひつじさんもレビューのお誘いしてくれて嬉しかったです🎶🎶