herohoroブログ

ESLint・Jest・snapshot・GitHub Actionsってなんだ!?



🔄   2022-08-02

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

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

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

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

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

修正完了\(^o^)/ 2022/07/12 10:00~12:30 1週間ほど整理してやっと記事の状態になりました。

ESLint

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

画像が読み込まれない場合はページを更新してみてください。

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

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

本家ではどんなことをしてる?

画像が読み込まれない場合はページを更新してみてください。

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にするのダメ

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

意味
0なしoff
1警告warn
2エラーerror

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

【参考になった記事】

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

画像が読み込まれない場合はページを更新してみてください。
Next.jsの基本ESLint設定と、より厳格なCore Web Vitalsルールセットが含まれています。 これは、ESLintを初めてセットアップする開発者に推奨される構成です。

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

Next.jsで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も同じ時期に存在していたことを今になって知りました….。

GitHubへpushした時も活躍してもらう

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

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

🔄
2022/07/17_PRしたときに出現!!スクショを追加しまーーーす。 (多分このcheckのことなのかな?って解釈しています。間違えていたらごめんなさい。)
画像が読み込まれない場合はページを更新してみてください。

本家の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も追加してチェックするように変更したっていうことみたい。

環境変数の設定の優先度
🤔
exportって….???

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

画像が読み込まれない場合はページを更新してみてください。

(´;ω;`)やっと分かった……

ブランチの切り替え

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の世界

画像が読み込まれない場合はページを更新してみてください。

Jest公式サイト

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

画像が読み込まれない場合はページを更新してみてください。

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

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

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

Next.jsでJestを導入

画像が読み込まれない場合はページを更新してみてください。
Vercel公式ドキュメントより

https://nextjs.org/docs/testing

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

画像が読み込まれない場合はページを更新してみてください。

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

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

🤔
Introductionで説明されているってことからまずこれやろっかって感じなのかもな〜

画像が読み込まれない場合はページを更新してみてください。

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

jest-domはテスティングライブラリにとって連れのようなライブラリです。(へろ意訳) Jest用のカスタムDOM要素適合を提供します。
🤔
テスティングライブラリがあるならjest-domライブラリも参上するぜ的な感じなのかな…..

Next.jsで使うJestの設定

画像が読み込まれない場合はページを更新してみてください。
Vercel公式ドキュメントより

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は読み込まれない
画像が読み込まれない場合はページを更新してみてください。
Vercel公式ドキュメント(日本語版)より

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

🤔
Jestのデフォルトのテスト環境ってどこに記述されている???

画像が読み込まれない場合はページを更新してみてください。

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の有無で 記事下のシェアボタンが出現するので そこが差分となって弾かれたってこと(´;ω;`)

画像が読み込まれない場合はページを更新してみてください。

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^)/

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

振り返り

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

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

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

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

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

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

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

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

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

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

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

八朔さんありがとう〜〜〜〜(´;ω;`)

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

( ゚д゚)ハッ!

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

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

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

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

あースッキリ。

今回のやり取りはこちらのスレッド

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

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

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

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

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

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

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

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

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

話を戻して….

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

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


🐌 余談…..

【深夜学習】とは….

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

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

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

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

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

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

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

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

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

ESLintすごく楽しかったです〜〜〜〜\(^o^)/\(^o^)/

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

Twitterでは更新のお知らせを随時行っています

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

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


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

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/