async.spec.js のテストを修正する

はじめに

このプロジェクトでは、vue-router-3.0.1 プロジェクト内の async.spec.js ファイルの問題を修正する方法を学びます。async.spec.js ファイルには、エラーを正しく検出していないテストケースが含まれており、あなたのタスクはコードを修正して、テストが予想通りに合格するようにすることです。

👀 プレビュー

メッセージ:
    予想値 $.length = 3 が 5 と等しいことを期待しています。
    予想値 $[3] = undefined が 4 と等しいことを期待しています。
    予想値 $[4] = undefined が 5 と等しいことを期待しています。

🎯 タスク

このプロジェクトでは、以下を学びます。

vue-router-3.0.1 プロジェクト内の async.spec.js ファイルをどのように見つけて修正するか
既存のテストケースの問題をどのように理解するか
テストケースを修正するために必要な変更をどのように実装するか

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

ユニットテストの問題を特定して修正する
非同期コードと runQueue ユーティリティ関数を扱う
テストケースのデバッグとトラブルシューティングの技術を適用する

始めるには、エディタの左側のディレクトリにある vue-router-3.0.1 フォルダを見ることができます。

このステップでは、vue-router-3.0.1 プロジェクト内の async.spec.js ファイルの問題を修正する方法を学びます。

vue-router-3.0.1/test/unit/specs/async.spec.js ファイルを開きます。
it("should work", (done) => {... }) ブロックを見つけます。
テストを簡単にするために、const queue = [1, 2, 3, 4, 5].map を const queue = [1, 2, 3].map に変更します。

const queue = [1, 2, 3].map((i) => (next) => {
  //...
});

ターミナルで vue-router-3.0.1 ディレクトリを開きます。
依存関係をインストールするために npm install コマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl + C を押してプロセスを終了し、再度このコマンドを実行してください。）
すべての依存関係を正常にインストールした後、ターミナルで npm run test:unit コマンドを実行してユニットテストを実行します。修正する前に、上記のテストスクリプトがエラーを検出していないことに気付きます。（上記のコードでは、calls の値は [1, 2, 3] であり、[1, 2, 3, 4, 5] と等しくありません。）
上記の問題を修正するには、vue-router-3.0.1/test/unit/specs/async.spec.js ファイル内を以下のコードに変更します。

const queue = [1, 2, 3].map((i) => (next) => {
  calls.push(i);
  setTimeout(next, 0);
});

ここでの変更は、setTimeout(done, 0) を setTimeout(next, 0) に変更したことで、関数がすぐに抜け出さなくなりました。

テストを実行する

このステップでは、vue-router-3.0.1 プロジェクトを再構築し、修正した効果をテストします。

ユニットテストを実行するために npm run test:unit コマンドを再度実行します。
修正後、以下の出力が表示されるはずです。

メッセージ:
    予想値 $.length = 3 が 5 と等しいことを期待しています。
    予想値 $[3] = undefined が 4 と等しいことを期待しています。
    予想値 $[4] = undefined が 5 と等しいことを期待しています。

これは、async.spec.js のテストが正常に修正されたことを示しています。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。