herohoroブログ

ESLint・Jest・snapshot・GitHub Actionsっおなんだ



🔄   2023-03-14

今日は【深倜孊習】ず称しおeasy-notion-blogのlintやtestに぀いおチャベスさんず倜な倜なやり取りしながら理解を深めた内容を私なりに敎理をしおこの蚘事にたずめおみようず思いたす。

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

文章よりスクショやツむヌト倚めですm(_ _)m

途䞭途䞭知識がただ浅い郚分もあるので「ん」っお感じるこずもあるかもしれたせん。

そしたらTwitterで教えお䞋さい。

✅
修正完了(^o^) 2022/07/12 10:00~12:30
週間ほど敎理しおやっず蚘事の状態になりたした。

ESLint

頭の敎理をするために曞きなぐっおみた。

image block

静的テストずは、プログラムコヌドを実行せずに、ドキュメントや゜ヌスコヌドなどのチェックによっお誀りや脆匱性を怜出するテスト手法のこずです。

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

本家ではどんなこずをしおる

image block

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

🔜 Add linterのPRで行われたこず

  • eslintのプラグむンをむンストヌル
  • eslintのプラグむンの掚奚蚭定をする
  • 修正

特にeslintのプラグむンの掚奚蚭定をしおいる.eslintrc.jsonの蚘述を芋るずESlintで䜕をしおるのかが分かりたした。

image block

  • ルヌルの登録👉pluginsプロパティ パッケヌゞ名
  • 登録したルヌルに察する具䜓的なON/OFFの指定👉extendsプロパティ※ パッケヌゞ名/指定名
    • パッケヌゞ名@typescript-eslint
    • 指定名eslint-plugin
  • 個別に远加したいルヌルを指定👉rulesプロパティ パッケヌゞ名/指定名
    • no-unused-vars未䜿甚倉数を䜿うのダメ
    • no-explicit-any型定矩をanyにするのダメ

<぀あるルヌルのレベル>

倀意味倀
0なしoff
1譊告warn
2゚ラヌerror

😎
eslint-pluginは省略できるみたい。ただしrecommendedは特殊

【参考になった蚘事】

🀔
extendsプロパティにあるnext/core-web-vitalsっおなんだろう ..

image block
Next.jsの基本ESLint蚭定ず、より厳栌なCore Web Vitalsルヌルセットが含たれおいたす。
これは、ESLintを初めおセットアップする開発者に掚奚される構成です。

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

Next.jsでESLintを䜿う

image block

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

🔜やるこず

  • package.jsonにnext lintを远蚘
  • yarn lint で起動

本家のコヌドを芋おみるず ..

image block

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

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

image block

フォヌマットを修正しおくれるpretterも同じ時期に存圚しおいたこずを今になっお知りたした .。

GitHubぞpushした時も掻躍しおもらう

PRした時に぀チェック項目があっお動いおくれおたあれかも〜(Ž・ω・`)

終わるずすぐ消えちゃうので芋぀けた時にスクショを远加したす〜。お埅ちあれ 😎

🔄
2022/07/17_PRしたずきに出珟スクショを远加したヌヌヌす。
(倚分このcheckのこずなのかなっお解釈しおいたす。間違えおいたらごめんなさい。)
image block

本家のPRを確認するず ..

image block

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

🔜 GitHub actionsのPRで行われたこず

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

🀔
本番環境ず同じようにっおなんだろう ..
開発環境・本番環境での環境倉数の切り替え

このPRでの譊告・゚ラヌメッセヌゞに぀いおの倉曎を芋おみるず  

image block
🀔
なるほど。

サヌバヌ(Node.js)の環境倉数ず本番環境が同じするように指摘しおいた郚分を、

GitHub Actionsも远加しおチェックするように倉曎したっおいうこずみたい。

環境倉数の蚭定の優先床
🀔
exportっお .???

シェルっおタヌミナルのりィンドりのこずだった ..

image block

(Žω)やっず分かった  

ブランチの切り替え

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

隠しファむルにこんな蚘述があったずは .

image block

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

さお、ここたでがESLint。

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

ようこそJestの䞖界

image block

Jest公匏サむト

本家のPRを確認するず ..

image block

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

🔜 Setup JestのPRで行われたこず

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

Next.jsでJestを導入

image block
Vercel公匏ドキュメントより

https://nextjs.org/docs/testing

jest以倖にinstallしたラむブラリに぀いお調べおみるず .

image block

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

React Testing Libraryは、DOM Testing Libraryの䞊に、Reactコンポヌネントを操䜜するためのAPIを远加しお構築されおいたす。

🀔
Introductionで説明されおいるっおこずからたずこれやろっかっお感じなのかもな〜

image block

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

jest-domはテスティングラむブラリにずっお連れのようなラむブラリです。(ぞろ意蚳)
Jest甚のカスタムDOM芁玠適合を提䟛したす。
🀔
テスティングラむブラリがあるならjest-domラむブラリも参䞊するぜ的な感じなのかな ..

Next.jsで䜿うJestの蚭定

image block
Vercel公匏ドキュメントより

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

本家を芋おみるず ..

image block

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

同じだ〜〜〜〜(^o^)

テスト環境での環境倉数を深堀り
今回はNODE_ENVを指定しおいない

確かにどこにもない。

test環境なので.env.localは読み蟌たれない
image block
Vercel公匏ドキュメント(日本語版)より

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

🀔
Jestのデフォルトのテスト環境っおどこに蚘述されおいる

image block

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

🀩
これがテスト環境のデフォルトか!!!!

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

🀔
なぜJestはデフォルトを䜿わずにexportしおいた方を䜿ったのか .???

アルパカ先生のツむヌトのおさらい

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

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

👇

test環境では䜕も読み蟌たれる予定はなかった ..

👇

でも優先順䜍の高い環境倉数を読み蟌んでしたった

👇

testで䜿われた

⛄
䜿われた結果 ..
easy-notion-blogではNEXT_PUBLIC_URLの有無で
蚘事䞋のシェアボタンが出珟するので
そこが差分ずなっお匟かれたっおこず(Žω)

image block

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

image block
📎

😵
もし今回のようなスナップショットの゚ラヌに芋舞われたらどうしたらいいの
スナップショットの差分を埌から修正

アルパカ先生より

次の手順をやっおみおください〜
(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^)

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


Xではたた〜にする曎新のお知らせを行っおいたす

興味ある方はLet'sフォロヌ★

▌ この蚘事に興味があったら同じタグから関連蚘事をのぞいおみおね

Buy Me A Coffee

衚瀺されない


Notion版herohoroブログ公開䞭だよ(^o^)


新着蚘事を通知したい


RSSリヌダヌにatomのリンクを登録するず通知が行くよ🐌

https://herohoro.com/atom

やっおみおね(*Žω`*)(*Žω`*)

Twitter Timeline


フォロヌ倧歓迎(^o^)