冗談を理解する

ソフトウェア開発の1つの重要な領域を完全に無視することはできません:自動テスト.JavaScriptで利用できるさまざまなテストライブラリやテストランナーがあります.でも、今日はJest , テストライブラリは、JavaScriptのテストライブラリの前の王モカに似て、Facebookによって開発され、内部で使用されます.

インストール
JESTはバックエンドをテストするのにうまく機能し、反応アプリケーションをテストするときに光る.テストは開発中のみ実行されるので、(1)新しいディレクトリを作成し、(2)NPMプロジェクトを実行し、(3)JESTをコマンドとの依存関係としてインストールすることによって、ゼロからJestを理解し、理解します.

$ mkdir understandingJest
$ npm init -y
$ npm install --save-dev jest

冗談の設定
デフォルトであってもtesting environment Jest is nodeでは、パッケージの末尾に次のように簡単に追加することで指定できます.JSONファイル

{
    "jest": {
        "testEnvironment": "node"
    }
}

Webアプリを構築している場合は、ブラウザのような環境を使用することができますjsdom 代わりに.
The jest command line runner 便利なオプションの数があります.それで、我々の命をより簡単にするために、我々はNPMスクリプトを定義しますtest Jestテストを実行して報告するには--verbose and --runInBand .

{
    "scripts": {
        "test": "jest --verbose --runInBand"
    }
}

--verbose 個々のテスト結果をテストスイート階層で表示する--runInBand すべてのテストを現在のプロセスで連続的に実行します.テストの実行よりも子プロセスのワーカープールを作成するのではなく、デバッグに便利です.

テスト用ディレクトリ構造
ノードに付着する.ベストプラクティス、2つのフォルダを作成します.内部テストでは、実行中のjestを作成します.テスト.jsファイルと内部のutilsはヘルパー関数を作成します.jsファイル.最後に、少なくともルートディレクトリでDBを作成しましょう.JSONファイル.
プロジェクトは次のディレクトリ構造を持つ必要があります.

├── node_modules
├── test
│   └── understandingJest.test.js
├── utils
│   └── helper_functions.js
├── db.json
├── package-lock.json
├── package.json

ヘルパー機能と模擬データ
のいくつかの単純な関数を作成しましょう.JSファイルsum , average , and biggest そして、自動テストのためにそれらをエクスポートします.

const sum = (a, b) => {
    return a + b
}

const average = array => {
    const reducer = (sum, item) => {
        return sum + item
    }

    return array.reduce(reducer, 0) / array.length
}

const biggest = array => {
    const reducer = (biggest, value) =>{
        return biggest > value ? biggest : value
    }

    return array.reduce(reducer, 0)
}

module.exports = {
    sum,
    average,
    largest
}

我々のDBで.JSONファイルは、ラップトップ用のJSONデータベースを模擬する予定です.SSSを維持するには、次のように一つのアイテムしかありません.

{
    "laptops": [
        {
            "name": "Macbook Pro 13",
            "price": {
                "amount": 1299,
                "currency": "USD"
            },
            "display": "Retina display",
            "onlyHasUSBTypeC": true,
            "hasTouchBar": true,
            "builtInApps": [
                "Siri",
                "Safari",
                "Messages",
                "Facetime"
            ]
        }
    ]
}

さあ、テストをしましょう!
Jestでは、個々のテストケースがtest 関数.最初の関数パラメータは、テスト記述を文字列で表します.番目のパラメータはテストケースの機能を定義するテスト関数です.
最初にテストするコードを実行します.テスト関数を実行し、結果を検証しますexpect function . The expect 関数を使用すると、別のもののトンを検証できるように';matchers ';の数にアクセスできます.
ここでは、1つのテストを見てみましょう.テスト.jsファイル

const hf = require('../utils/helper_functions')

test('...sum value', () => {
    const result = hf.sum(5, 5)
    console.log(`The sum result is: ${result}`)
    expect(result).toEqual(10)
})

上の例では、ヘルパー関数をhf テスト機能の中でhf.sum には、(2)2つの値を追加し、(2)console logを結果として(3)結果が任意に設定されているかどうかをチェックします.覚えておいてください'matchers' 私たちのテストケースに応じて設定することができます.
この段階では、次のコマンドを使用してこの和テストを実行できます.

$ npm run test

そして、次のような結果が得られます.

> understandingjest@1.0.0 test
> jest --verbose --runInBand

 PASS  tests/understandingJest.test.js
  ✓ ...sum value (18 ms)

  console.log
    The sum result is: 10

      at Object.<anonymous> (tests/understandingJest.test.js:6:13)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.483 s, estimated 1 s
Ran all test suites.

コレクションブロックとより多くのテスト
記述ブロックは、論理コレクションにテストをグループ化するために使用できます.JESTのテスト出力も、記述されたブロックの名前を使用します.今回は、いくつかのヘルパー関数を使用するテストを書きましょう.

const hf = require('../utils/helper_functions')

describe('What is the', () => {
    test('...sum value', () => {
        const result = hf.sum(5, 5)
        expect(result).toEqual(10)
    })
    test('...average value', () => {
        const result = hf.average([5, 5, 5, 5, 5])
        expect(result).toEqual(5)
    })
    test('...biggest value', () => {
        const result = hf.biggest([1, 15, 3, 2, 4])
        expect(result).toEqual(15)
    })
})

テストの実行
The npm test コマンドは、アプリケーションのすべてのテストを実行します.テストを書くときは、通常、1つまたは2つのテストだけを一度に実行するのがベストです.単一のテストを実行するには、- tフラグを指定してテストの名前を指定できます.

$npm test -- -t 'name-of-spec'

また、複数のテストファイルを持っている場合は、特定のファイルにあるテストを実行するだけでもよい

$npm test -- tests/understandingJest.test.js

データベースからのテストの実行
Jestを使用してバックエンドテストを実行するには、データベースを使用してクエリを実行できますSuperTest and SuperAgent APIのようなファッションで.今日、私たちは簡単に行き、DBを使用します.我々が以前に作成して、探検するJSON.toHaveProperty(keyPath, value?) 次のテストを実行します.

const db = require('../db.json')

const macbookPro = db.laptops.find(laptop => laptop.name === "Macbook Pro 13")

describe('The latest Macbook Pro is', () => {
    test('...very expensive', () => {
        expect(macbookPro.price.currency).toBe('USD')
        expect(macbookPro.price.amount).toBeGreaterThan(1000)
    })

    test('...probably the only computer with NO normal ports', () => {
        expect(macbookPro.onlyHasUSBTypeC).toBe(true)
    })

    test('...at least some builtInApps for free', () => {
        expect(macbookPro).toHaveProperty('builtInApps', ["Siri", "Safari", "Messages", "Facetime"])
    })
})

上の例では、まずデータベースからデータベースを取得します.JSONファイル.それから、私たちはArray.prototype.find() メソッド.最後に、我々の選択されたオブジェクトを使用して、我々のコンピュータが(1)非常に高価であるならば、調べるためにテストを走らせてください、そして、(2)それが通常のポートを持っていないならば、(3)我々が必要とする4つのビルトイン・アプリであるならば.
テスト結果は次のようになります.

> understandingjest@1.0.0 test
> jest --verbose --runInBand

 PASS  tests/understandingJest.test.js
  The latest Macbook Pro is
    ✓ ...very expensive (2 ms)
    ✓ ...probably the only computer with normal ports
    ✓ ...at least some builtInApps for free (1 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.501 s, estimated 1 s
Ran all test suites.

この記事のすべてのプロジェクトファイルを含むリポジトリを見てくださいhere .
それで、うまくいけば、アプリケーションのためのJestテストについてのより良い理解で、我々は行きます.読んでハッピーテストをありがとう!
連絡を取る
Whatsapp
Github