ユーニックス総合研究所

  • home
  • archives
  • nuxt-yarn-lock

Nuxtにコミットしようとしたらテストでこけた【yarn.lockの存在】

  • 作成日: 2021-12-15
  • 更新日: 2023-12-24
  • カテゴリ: Nuxt

Nuxtにコミットしようとしたらテストでこけた

Nuxtをご存知でしょうか?
最近のVueのフレームワークです。
Nuxtを使って開発したという開発者も多く、掲示板やTwitterなどでもチラチラとその名前を見かける有名なフレームワークです。

用途としてはVueのSSR(Server Side Rendering)の導入などに使われることがあります。
コマンドから対話形式でアプリを初期化できるので、非常にユーズナブルです。

筆者も最近になってNuxtの勉強を始めました。
NuxtをインストールしてNuxtのウェルカムページを表示したところ、コードに気になるところがありました。
そのためNuxtにプルリクエストを送ろうと思って、Nuxtをフォークしました。

ローカルの開発環境でNuxtにコードを追加して、さぁテストを実行しようとしたところ、テストでこけました。
なぜこけたかというと、パッケージが見つからないというエラーです。
そのためパッケージをインストールするわけですが、その後のテストでも似たようなエラーが出ました。

なぜこんなにエラーが出るのか?

私はNuxtのコントリビューション用のドキュメントを見ました。
そこには「テストを実行してください」と書いてあります。
しかしテストを実行するとエラーが出ます。
エラーが出るのは私の追加したコード以外の所です。

あれぇ?
誰もテストを実行していないということか?
私は頭にクエッションマークを浮かべます。

しかしドキュメントにはこう書いてありました。

Note that both npm and yarn have been seen to miss installing dependencies. To remedy that, you can either delete the node_modules folder in your example app and install again or do a local install of the missing dependencies.

npmとyarnでは依存関係のインストール漏れがあります。node_modules/を削除して再インストールするかローカル環境に漏れている依存関係をインストールしてください。

If you are adding a dependency, please use yarn add. The yarn.lock file is the source of truth for all Nuxt dependencies.

依存関係を追加したらyarn addを実行してください。yarn.lockファイルはNuxtの真実の依存関係を記録しています。

なるほど、npmやyarnのインストールでは既知の依存関係のインストール漏れがあると。

package.jsonとyarn.lockの存在

ここで私はハテナになります。
package.jsonにパッケージの依存関係を記録できるのでは?
というかyarn.lockってなんなの?

yarn.lockについては↓の記事を見つけました。

この記事を見ると、package-lock.jsonやyarn.lockには依存パッケージの正確なバージョンが記録されるらしいです。
いっぽうpackage.jsonには「バージョンの範囲」が記録されるということです。
あくまでpackage.jsonが記録するのは「バージョンの範囲」であって、正確なバージョンを記録するわけではないと。

え! そうなの?!

私は「ふえ~」と天を仰ぎました。
今までの常識が崩れ去る……。間違った知識が是正されていく……。

つまりpackage.jsonを使ったパッケージのインストールでは、開発者の環境ごとにバージョンの範囲内で異なるバージョンのパッケージがインストールされる可能性があるということです。

yarn.lockからパッケージをインストールする

ではpackage-lock.jsonやyarn.lockに正確なバージョンが書かれているなら、このファイルからパッケージをインストールすればいいのでは?
私はそう考えてググりました。
すると↓の記事を見つけました。

この記事にはpackage-lock.jsonからパッケージをインストールするにはnpm ciを使えと書いてあります。

🦝 < 知らんかった

🐭 < まじで?

はい、マジです。
つまり、私はさっきまでパッケージのインポートエラーを直すためにnpm install --save-devでエラーで出てきたパッケージをインストールして、というのを延々と繰り返していたわけですが(1時間ぐらい)、npm ciを使えば一発でインストールできるということです。

🦝 < 私の1時間は?

🐭 < もう戻ってきません

最初は「誰もテストしてないのかよwww わろすwww」となっていた私ですが、1時間ぐらい経過してから「いや、いくらなんでもこれはおかしい……」となったわけです。

結論としておかしいのは私だったわけですが

しかし、Nuxtのプロジェクトでパッケージの依存関係を記録しているのはpackage-lock.jsonではなくてyarn.lockらしいです。
そのためnpm ciは使えないということになります。

ではyarn.lockからパッケージをインストールするにはどうしたらいいのか?
という話になります。
しかしググってみてもこれといった記事は見つかりません。
ちなみに私はyarnを使うのはこれが初めてです。

「デフォルトでyarn.lockからインストールされるのか?」
と思った私はyarn installを実行しました。
すると大量のパッケージがインストールされました。

なんだ! yarn installでやってればよかったのか!
私は拍子抜けしました。
あれだけnpm install --save-dev xxxxを実行したのに、私のあの時間はいったい……。

無事にテストを実行する

yarn install後、無事にnpm run testでテストケースが実行されました。
これで追加したコードの検証ができそうです。
ただテストのカバレッジは100%ではないみたいなので、ちょいちょい失敗します。
ですので自分の追加したところのコードのテストは別個で実行する必要がありそうです。
というかテストが多分不可なコードになるので、この辺をどうやって検証するのか悩ましい所でもあります。

おわりに

プロジェクトがyarnを使っている場合はyarn.lockが存在するか確認しましょう。
yarn.lockが存在している場合はnpm installではなくyarn installを実行するようにしましょう。
軽い気持ちでコミットしようと思ったのですが、おかげさまでいい勉強になりました。

🦝 < 勉強不足やね

🐭 < 精進せい