Mocha.js を使用した自動 Javascript テスト

誰もが知っているように、コードにはエラーが発生しやすく、特定のワークフローが場合によっては正常に機能することがわかっていても、他のワークフローを忘れてしまう可能性が高くなります。

簡単に言えば、コードを手動でテストすると、何かを見落とす可能性があると言えます。たとえば、func1() と func2() という 2 つの関数があり、func1() が次のような場合に機能することがわかっているとします。 re はすでに testing が定義されていますが、func2() が機能しないことがわかります。次に、func2() を修正しましたが、func2() に変更を加えた後、func1() がプロセス全体に適用されているかどうかを確認するのを忘れていました。 このプロセスではエラーが発生する可能性があり、通常はこれが数回発生します。

ここで、テストを手動で実行するのはあまり理想的な選択肢ではないことがわかっているため、作成したコードに加えて、別に作成したテストを実行することをお勧めします。これはいわゆる 自動テストです。

このチュートリアルでは、JavaScript での自動テストに Mocha を使用する方法を検討します。

最初のステップは、コード内で Mocha を同時に使用できるようにすることです。これを行うには、mocha.js が提供する CDN リンクを利用できます。このチュートリアルでは、Mocha で使用される可能性のあるさまざまな関数の正確な動作を確認する場合に適した Chai.js と Expect.js も使用します。書かれた。

ここには、index.html ファイルにインポートする必要があるすべての CDN があります。

Expect.js

リーリー

Chai.js

リーリー

モカ.js

リーリー

次のステップでは、お気に入りの IDE またはコード エディターの単純なプロジェクト ディレクトリに 3 つのファイルを作成します。

• index.html
• index.js
• test.js

以下に示す コマンドを使用することもできます。

リーリー

注 - touch コマンドはローカル マシンでは実行できない場合があります。その場合は、代わりに vi コマンドを使用してください。

index.html

すべてのファイルを作成したので、コードを記述します。 index.html ファイルを開き、次の行を貼り付けます。

＃＃＃例＃＃＃ リーリー

イラスト

上記の HTML コードでは、

Mocha、Chai

、Expect などのすべての依存関係を CDN 経由でインポートしました。 次に、2 つの異なる

js

ファイル、つまり index.js と tests.js を同期順序でインポートしました。つまり、最初にindex .js ファイルが実行され、続いて window.mocha() と bdd を設定するスクリプトが実行されます。 以下に示すコード スニペットを考えてみましょう。

リーリー

上記のコードの後で、

tests.js

ファイルを呼び出し、Mocha のさまざまなメソッドを呼び出します。以下に示すコード スニペットを考えてみましょう。 リーリー 次に、Mocha を使用して自動化された方法でテストするためのいくつかの関数を作成します。以下に示す

index.js

コードを考えてみましょう。 リーリー 上記の関数は、2 つのパラメーターを受け取り、単純にそれら 2 つの数値の合計を応答で返す非常に単純な関数です。

test.js

ここからが興味深い部分です。自動テストを使用して、上記の機能が期待どおりに動作するかどうかをテストします。以下に示す test.js コードを考えてみましょう。

リーリー

上記のコードでは、

index.html

ファイルを通じて Chai および Expect パッケージをインポートしました。 さらに、渡す最初のパラメータが選択した文字列である

describe

関数を使用しています。次に、it() 関数を呼び出す匿名関数を作成します。この関数は、最初のパラメータとして文字列を受け取り、2 番目のパラメータとして匿名アロー関数を受け取ります。

expect

関数を使用しています。この関数では、テストする実際の関数をパラメータとして呼び出し、deep.equal() メソッドを使用して等しいかどうかをチェックします。 ＃＃＃出力＃＃＃ HTML コードを実行し、ブラウザでコードを開いた後は、すべてが期待どおりに動作するはずです。以下に示すようなテキストがブラウザに表示されるはずです。

リーリー

2 番目の関数を追加しましょう

上の例では、

addNumbers という単純な JavaScript 関数をテストしました。

それでは、別の関数を追加してみましょう。今回はアロー関数を使用します。以下に示すコードを考えてみましょう。

index.js リーリー test.js

次に、上記の関数の自動テストを

tests.js

ファイルに記述してみましょう。以下に示すコード スニペットを考えてみましょう。

リーリー ＃＃＃出力＃＃＃

HTML コードを実行すると、今度はブラウザーに 2 つの関数の名前が表示されます。 リーリー 関数が期待した出力を返さない場合はどうすればよいでしょうか?

自動テストを作成した 2 つの関数では、実際には正しい値が得られることが期待されていました。エラー値を返すように関数のコアロジックを変更したらどうなるでしょうか?

考虑 index.js 文件中存在一个名为 multiplyNumber 的函数。让我们对函数进行更改，以便它不会给出我们预期的输出。

乘数

let multiplyNumber = (a, b) => {
   return a * b;
}

输出

现在，如果我们在浏览器中运行 HTML 代码，我们将在浏览器中得到以下输出。

multiplyNumber
should be able to multiply two numbers and give proper result‣
AssertionError: expected 0.3333333333333333 to deeply equal 3

使用多个描述函数进行自动化测试

在上面的两个示例中，我们使用了单个 describe 函数和简单函数。现在假设我们想要使用一个函数来计算数字的幂。

考虑下面所示的index.js代码

function power(x, n) {
   let res = 1;
   for (let i = 0; i < n; i++) {
      res *= x;
   }
   return res;
} 

在上面的函数中，我们采用两个参数，然后将一个数字的幂提高到 n 倍。

测试.js

现在让我们为此函数编写一个自动化测试。

describe("power", function () {
   describe("raises x to power 2", function () {
      function checkPower(x) {
         let expected = x * x;
         it(`${x} in the power 2 is ${expected}`, function () {
            expect(power(x, 2)).to.deep.equal(expected);
         });
      }
      for (let x = 1; x <= 5; x++) {
         checkPower(x);
      }
   });
});

我们可以看到，在自动化测试函数中，我们使用了嵌套的describe函数。在这里，我们检查在 index.js 中编写的 power() 函数是否按预期工作。

输出

power
raises x to power 2
1 in the power 2 is 1‣
2 in the power 2 is 4‣
3 in the power 2 is 9‣
4 in the power 2 is 16‣
5 in the power 2 is 25

结论

在本教程中，我们通过示例解释了如何使用 Mocha.js 与 Chai.js 和 Expect.js 在 JavaScript 中执行自动化测试。

以上がMocha.js を使用した自動 Javascript テストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。