モカとチャイの使用

今回はモカとチャイの使い方についてお届けします。実際に使用する際の注意点は何ですか?

Mochaの紹介

Mochaは人気のある

JavaScriptテストフレームワークの1つであり、これを使用してテストを追加および実行してコードの品質を確認できます

Mochaの

インストールと構成

Mochaをグローバルにインストールする

npm install -g mocha

プロジェクトMochaもインストールします

npm install --save-dev mocha

次のスクリプトをpackage.jsonに追加します:

"scripts": {
    "test": "mocha"
}

Mochaの使い方

使用する前に、使用するテストプロジェクトの構造を見てみましょう:

図に示すように上記では、テスト ファイルを test ディレクトリに配置する必要があります。mocka が実行されている場合、test ディレクトリ内のすべての js ファイルが実行されます (

test より下のレベルに対してのみ、test/ レベルでは実行されません)。サブテスト）。

ここで、index.js はテストされたコードです:

/**
 * 加法函数
 * @param {第一个数} a 
 * @param {第二个数} b 
 */
function addNum(a,b){
    return a+b;
}
module.exports=addNum;

、index.test.js はテスト コードです (ここではテストが名前に追加されていますが、これは必須ではなく、テスト ファイルであることを区別するためだけに追加されていることに注意してください) :

var addNum=require('../src/index')

describe('测试index.js', function() {
  describe('测试addNum函数', function() {
    it('两数相加结果为两个数字的和', function() {
       if(addNum(1,2)!==3){
         throw new Error("两数相加结果不为两个数字的和")；
       }
    });
  });
});

上記のコードの構文を分析します:

テスト スクリプトには 1 つ以上の記述ブロックが含まれ、各記述ブロックには 1 つ以上の it ブロックが含まれる必要があります。

記述ブロックは「テスト スイート」と呼ばれ、関連するテストのセットを表します。これは、最初のパラメータがテスト スイートの名前 (「testindex.js」) であり、2 番目のパラメータが実際に実行される関数である関数です。
そのブロックは「テストケース」と呼ばれ、単一のテストを表し、テストの最小単位です。これも関数です。最初のパラメータはテスト ケースの名前 (「2 つの数値の加算は 2 つの数値の合計」)、2 番目のパラメータは実際に実行される関数です。

上記の例では、addNum関数をテストします

操作エラーがある場合、例外がスローされますこの時点で

npm test

を実行すると、次の結果が得られます

。操作エラーの結果を確認するには、index.js のコードを次のように変更しました:

function addNum(a,b){
    return a+b-1;
}
module.exports=addNum;

再度実行

npm test

結果は次のようになります:

Mocha とアサーション ライブラリ Chai

上記の Mochaたとえば、テストの失敗は例外をスローすることで処理されますが、これはやや面倒なので、アサーション ライブラリが登場しました。

ここではよく使われるアサーションライブラリchaiを紹介します。

これは、上記の例外スローメソッドをカプセル化したものであることが簡単に理解できます。判断が失敗した場合、例外がスローされます。
まず、chai:

npm install --save-dev chai

をインストールします
次に、chaiを使用して上記のindex.test.js:

var expect = require('chai').expect;
var addNum=require('../src/index')

describe('测试index.js', function() {
  describe('测试addNum函数', function() {
    it('两数相加结果为两个数字的和', function() {
      expect(addNum(1,2)).to.be.equal(3);
    });
  });
});

を変更しましょう

上記の構文は自然言語に非常に近く、式の結果が等しい(等しい)ことを期待(期待)します。表現 。

npm test

を実行すると、次の結果が得られます:

この図のアサーション ライブラリも、期待される結果 3 と実際の結果 2 を出力していることがわかります。

例外をスローするために判断を使用するのははるかに面倒です。

上記の構文はchaiのexpect構文であり、 should構文とasset構文もあります。

以前に Java と .NET を使用したことがある場合は、アセットの方が使いやすいかもしれません:

var assert = require('chai').assert;

assert.typeOf(foo, 'string');
assert.equal(foo, 'bar');
assert.lengthOf(foo, 3)
assert.property(tea, 'flavors');
assert.lengthOf(tea.flavors, 3);

これの文法的な意味は明らかなので、ここでは詳しく説明しません。

Mocha のその他の使用法

単一のテスト JS をテストしたい場合は、次を使用できます:

mocha test/index.test.js

または複数の JS

mocha test/index.test.js test/add.test.js

もちろん、

wildcard

を使用して、特定のすべての JS と JSX をテストすることもできますフォルダー:

mocha 'test/some/*.@(js|jsx)'

Mocha と ES6

上記で使用したものは ES6 構文ではないため、すべてのコードを ES6 構文に変更しましょう。

index.js は:

/**
 * 加法函数
 * @param {第一个数} a 
 * @param {第二个数} b 
 */
export default (a,b)=>{
    return a+b-1;
}

、index.test.js は:

import {assert} from 'chai'
import addNum from '../src/index'

describe('测试index.js',()=> {
  describe('测试addNum函数', ()=> {
    it('两数相加结果为两个数字的和', ()=> {
      assert.equal(addNum(1,2),3)
    })
  })
})

現時点ではモックを直接実行することは間違いなく不可能です。次に、babel:

npm install babel-core babel-preset-es2015 --save-dev

をインストールする必要があります。プロジェクト ディレクトリ .babelrc ファイルの下に新しいものを追加します:

{
  "presets": [ "es2015" ]
}

次に、package.json 内のスクリプトが次のように変更されます:

"scripts": {
  "test": "mocha --compilers js:babel-core/register"
},

--compilers パラメーターは、テスト スクリプトのトランスコーダーを指定するために使用されます。このコマンド行は、使用することを意味します。 mocha /register モジュールを実行するときに最初に babel-core を実行し、.js ファイルを処理します

注:

--コンパイラーは公式には冗長ですが、代わりに

"scripts": {
  "test": "mocha --require babel-core/register"
},

コマンドがよりシンプルになりました。

Mocha测试用例执行的超时和高亮

Mocha默认每个测试用例最多执行2000毫秒，如果到时没有得到结果，就报错。以下命令设置超时时间为5000：

mocha -t 5000 index.test.js

Mocha默认会高亮显示超过75毫秒的测试用例，以下命令设置高亮判断的临界值：

mocha -s 1000 index.test.js

Mocha测试的钩子

Mocha在describe块之中，提供测试用例的四个钩子：before()、after()、beforeEach()和afterEach()。它们会在指定时间执行。

describe('测试index.js',()=> {
  before(()=>console.info("在本区块的所有测试用例之前执行"))

  after(()=>console.info("在本区块的所有测试用例之后执行"))

  beforeEach(()=>console.info("在本区块的每个测试用例之前执行"))

  afterEach(()=>console.info("在本区块的每个测试用例之后执行"))

  describe('测试addNum函数', ()=> {
    it('两数相加结果为两个数字的和', ()=> {
      assert.equal(addNum(1,2),3)
    })
  })
})

小结

关于mock和chai常用的一些玩法都讲了，更多的关于mock的测试结果输出格式，以及skip跳过测试和only仅测试当前用例等玩法就不讲述了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue指令的使用

JS闭包的使用

以上がモカとチャイの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。