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
を実行するようにしましょう。
軽い気持ちでコミットしようと思ったのですが、おかげさまでいい勉強になりました。
🦝 < 勉強不足やね
🐭 < 精進せい