JavaScriptテスト教程-part 1:Jestでユニットテストを行います.

作者:Macin Wanago
狂おしい技術家
原文:https://wanago.io/2018/08/27/...
無断転載は厳禁です.
本論文はJavaScriptテスト教程シリーズの第1部である.

1.JavaScriptテスト教程-part 1:Jestでユニットテストを行う

.JavaScriptテスト教程–part 2:Enzymeを導入し、Reactコンポーネント

をテストします.

.JavaScriptテスト教程–part 3:propsテスト、マウント関数とスナップショットテスト

.JavaScriptテスト教程–part 4:アナログAPI呼び出しとアナログReactコンポーネントインタラクション

いろいろな種類のテストがありますが、その中の一部を先に説明します.まず、ユニットテストの基礎知識を紹介します.つまり、テストアプリケーションの各部分を紹介して、それらが使用に適しているかどうかを確認します.このために,Facebookで開発したテストフレームワークJestを使用します.準備ができました.テストを行うために必要な機能があります.
テストの種類
テストはあなたのコードを確認するためのコードです.テストは自分のプログラムに自信を持ってくれます.それらはまた、あなたがバグを修復する時に他のバグを生成することを防ぐことができます.プログラムのパーティションをテストしてもいいです.個々の関数とその戻り値からブラウザで実行する複雑なプログラムまで.これは本コースの最初の文章ですので、流行のテストタイプを簡単に比較します.
ユニットテスト
ユニットテストはコードブロックをカバーしています.動作中は大丈夫です.テストされたユニットは、関数、モジュール、クラスなどとすることができます.ユニットテストは互いに分離し、独立しなければならない.与えられた入力については、ユニットで検査結果をテストし、問題を早期に発見し、退化を回避することで、プログラムの各部分が予想通りに動作するように確保することができます.
統合テスト
あなたのすべてのユニットがテストに合格したとしても、すべての部分が正常に動作することができるという意味です.それでもプログラムは失敗する可能性があります.統合テストはモジュール間のプロセスをカバーしています.各モジュールが一緒に作業している間、組み合わせとテストを行います.彼のおかげで、あなたのコードが全体的に正常に運行されることを確認する方法があります.
エンドテスト(E 2 E)
他のタイプのテストとは対照的に、エンドテストは常にブラウザ(またはブラウザ)環境で実行されます.これは本当に開いているブラウザかもしれません.テストを実行します.これはまた、ヘッドブラウザがない環境、つまりユーザインタフェースがないブラウザでもあります.E 2 Eテストのポイントは、私たちが実行しているプログラムで実際のユーザーをシミュレートすることです.彼らはスクロールをシミュレートして、クリックしたり、入力したりします.実際のユーザーの観点から、私たちのプログラムがうまく実行されているかどうかを確認します.
Jestでユニットテストを行います.
JestはFacebookで開発されたテストフレームです.目的の一つは、既存のツールを通じて「ゼロ設定」体験を提供することです.それはもうしばらくの間存在していて、早くて信頼できる.

npm install --save-dev jest

忘れずにnpmスクリプトに追加してください.
package.json

"scripts": {
  "test": "jest"
}

簡単のために、Jestを簡単な純粋なNode.jsモジュールと一緒に使用します.後で私達はどうやってReactでJestを使うかを勉強します.
まず、テストできる簡単な関数を作成します.
divide.js

function divide(a, b) {
  return a / b;
}
module.exports = divide;

Jestは正規表現でテストするファイルを決定します.デフォルトでは、testsディレクトリ内にある場合、またはtestまたは.specを末尾にして、実行されます.jsファイルと.jsxファイル.プロジェクトのpackage.jsonファイルでtestRegex属性で指定できます.
package.json

"jest": {
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$"
}

最後にテストファイルを作成します.デフォルトのネーミング構成に従うために、私たちはdivide.test.jsと名づけました.
divide.test.js

const divide = require('./divide');
 
test('dividing 6 by 3 equals 2', () => {
  expect(divide(6, 3)).toBe(2);
});

npm run testコマンドでこのテストを実行します.

 PASS  ./divide.test.js
  ✓ dividing 6 by 3 equals 2 (5ms)

テストを実行するためにtest関数を使用します.これは3つのパラメータを含んでいます.テストの名前には、期待値の関数とタイムアウト(ミリ秒単位)が含まれています.タイムアウトはデフォルトで5秒です.テストにかかる時間が長すぎると、テストを中止するまでどれぐらいかかりますか?
expect関数はテスト値に使用されます.パラメータとして、あなたがテストする値を受け取ります.私たちの例では、divide関数の戻りです.一組のmatcher関数(例で使うtoBe)を呼び出して、ある方法でこの値をテストできます.完全な情報については、Jest文書にアクセスしてください.
グループテスト
各ファイルは通常一つ以上のテストがあります.Jestを使って、describe関数を使ってそれらをグループ化することができます.複数のテストを統合できるブロックを作成しました.これをより良く表示するために、グローバルMathオブジェクト上でいくつかのテストを行います.

describe('in the math global object', () => {
 
  describe('the random function', () => {
    it('should return a number', () => {
      expect(typeof Math.random()).toEqual('number');
    })
    it('should return a number between 0 and 1', () => {
      const randomNumber = Math.random();
      expect(randomNumber).toBeGreaterThanOrEqual(0);
      expect(randomNumber).toBeLessThan(1);
    })
  });
 
  describe('the round function', () => {
    it('should return a rounded value of 4.5 being 5', () => {
      expect(Math.round(4.5)).toBe(5);
    })
  });
 
})

気がつくかもしれません.
ビット関数
test関数これはよく使われる別名です.実行it === testは戻ります.
true
このようにテストをグループ化することで、コードがより綺麗になります.プログラムコードとテストコードの品質に関心を持つべきです.
問題が発生すれば、コードをより読み取り可能にする以外に、より友好的なエラーメッセージを提供するのに役立ちます.テストをexpect(typeof Math.random()).toEqual('string')を含むように変更すると、以下のメッセージが見られます.

 FAIL  ./math.test.js
  ● in the math global object › the random function › should return a number
 
    expect(received).toEqual(expected)
 
    Expected value to equal:
      "string"
    Received:
      "number"

締め括りをつける
紹介として、基本的なJavaScriptテストのタイプを説明しました.カバーされている最初のクラスのテストは「セルテスト」です.それらを実行するために、私たちはJestフレームワークの基礎知識を理解しました.テストの実行方法(インストールとファイル名)に関する知識が含まれています.テストを実行するために、test、it、describe関数を使用しました.
この記事の最初のWeChat公式アカウント:フロントエンドのパイオニア
QRコードをスキャンして公衆番号に注目してください.毎日新鮮な先端技術文章を送ります.
このコラムの他の高賛記事を読み続けてください.

Shadow DOM v 1

を深く理解する.

一歩教えます.WebVRでバーチャルリアリティーを実現します.

13個の開発効率を向上させる現代CSSフレーム

クイックハンドオーバBootstraphue

JavaScriptエンジンはどのように働きますか?コールスタックからPromiseまでは知っておく必要があります.

Websocket実戦:NodeとReactの間でリアルタイム通信を行う

Gitに関する20の面接問題

Node.jsのconsolie.log

を深く解析します.

Node.jsは一体何ですか?

分、Node.jsでAPIサーバ

を構築する.

Javascriptのオブジェクトコピー

プログラマは30歳前の月給は30 Kに達しませんでした.

14の最も良いJavaScriptデータ可視化ライブラリ

8個のフロントエンドへの最上位VS Code拡張プラグイン

Node.jsマルチスレッド完全ガイド

HTMLをPDFに変換する4つの案と

を実現する.

もっと多い文章…