Jest初見——ユニットテストと自動化報告

Jest初見——ユニットテストと自動化報告
準備工作
ジェットストをインストールする
cnpm install--save-dev just
バージョンを表示
just-V

は、あなたのプロジェクトがより新しいJustテストフレームをインストールしていることを確認します.(バージョンが変わると予測できないバグが発生する可能性があります.例えば、設定属性名が変更されます.)

は、justプロファイルjst.co nfig.jsの基本構成

を完了しました.
実現ユニットテスト
まずするべきこと:どうやってテストするか分かりますか?Webアプリケーションを作成しているなら、良いスタートラインはアプリケーションの各ページとユーザー相互作用をテストすることです.しかし、Webアプリケーションは、関数やコンポーネントなどの要素コードから構成されており、個別にテストが必要です.多くの場合、二つの場合があります.

、いくつかの関数の未知のエトキシコードを引き継いでいます.

は、前にない新しい機能を実現します.
この2つの場合には、テストを与えられた関数が予想される結果を生むかどうかを確認することによって、自分を助けることができます.以下は典型的なテストプロセスの様子です.

試験する関数を導入する

関数入力

定義要望

は、予想通りの出力があるかどうかを確認する

.
このように実行するだけで、入力-予想出力-断言結果
テストケース
以下は完全なテストケースです.

は、jsファイルを作成し、試験関数

を記述する.

   //utils.js
   export function fixedZero(val) {
     return val * 1 < 10 ? `0${val}` : val;
   }

作成.test.jsファイルに、断定

を追加します.

//utils.test.js
import { fixedZero } from './utils';
...
// describe('        ',() => {
//   test('    ', () => {
//       expect("").toBe("");
//   });    
// })

describe('fixedZero tests', () => {
  it('should not pad large numbers', () => {
    expect(fixedZero(10)).toEqual(10);
    expect(fixedZero(11)).toEqual(11);
    expect(fixedZero(15)).toEqual(15);
    expect(fixedZero(20)).toEqual(20);
    expect(fixedZero(100)).toEqual(100);
    expect(fixedZero(1000)).toEqual(1000);
    expect(fixedZero(1000)).toEqual(1000);
  });

  it('should pad single digit numbers and return them as string', () => {
    expect(fixedZero(0)).toEqual('00');
    expect(fixedZero(1)).toEqual('01');
    expect(fixedZero(2)).toEqual('02');
    expect(fixedZero(3)).toEqual('03');
    expect(fixedZero(4)).toEqual('04');
    expect(fixedZero(5)).toEqual('05');
    expect(fixedZero(6)).toEqual('06');
    expect(fixedZero(7)).toEqual('07');
    expect(fixedZero(8)).toEqual('08');
    expect(fixedZero(9)).toEqual('09');
  });
});

コマンドラインにnpm test utils.test.jsを入力すると、コマンドテーブルの戻りが見えます.
ブラウザでテスト結果の表示を実現する
いくつかの比較的大きなプロジェクトに対して、ユニットテストを百以上の関数で行いたい場合、テスト結果はコンソールで明らかに足りないだけです.どのように優雅にテスト結果を見せて、テスト結果の具体的な問題を詳しく観察できますか?
私達はjustのテスト結果を記憶します.
方法

.私達はnodejsを通じて実現することができますが、簡単なnodeサーバを配置する必要があります.しかし、方法が複雑すぎて、詳しくは説明しません.

.報告ツールjst-html-reportを使っています.
パラメータ設定

.jst公式文書によると、jst.co fig.jsにはtestResults Processor属性があります.

Propty
Description
Type
Default
testResults Processor
This option allows the use of a custom restom processor.This processor must be a node module that exporta function expecting an object with the follows structure as the first argt and return it:
ストリングス
undefined
この属性は結果処理プログラムを使用することができます.このプロセッサは出力関数のnodeモジュールでなければなりません.この関数の最初のパラメータはテスト結果を受信し、最終的にテスト結果を返さなければなりません.試験結果を受信し、最終的に試験結果を返すために使用することができます.
まずインストールします.cnpm install ject-html-report--save-dev
jst.co nfig.jsでは、jst-html-reportの属性を具体的に設定します.
使用する属性:
Propty
Description
Type
Default
pageTitle
The title of the document
ストリングス
「Test Suite」
out put Path
The path to where the plugin will output the HTML report
ストリングス
「./test-report.」
include FailureMsg
If this setting is set to true、this will output the detailed failure message for each failed test.
bollan
false
その他の属性は公式文書を参照してください.https://github.com/Hargne/jes...
jst.co nfig.jsでjst-html-reportの配置を完了しました.

       //jest.config.js
       module.exports={
           ...
           testResultsProcessor:'./testReport',
           reporters: [
           'default',
           [
             './node_modules/jest-html-reporter',
             {
               //      
               pageTitle: 'Test Report',
               //       HTML     。
               outputPath:'testReport/JesttestReport.html',
               //                 。
               includeFailureMsg: true,
             },
           ],
         ],
       }

再度コマンドラインにnpm test utils.test.jsを入力すると、テスト結果がtestReport/JesttestReport.に戻ります.
私たちはこのhtmlファイルを開けて、テスト結果の可視化を完成しました.
締め括りをつける

は、ユニットテストを実施する方法を把握しました.

フロントエンドユニット試験自動化生成レポート

を実現しました.
参考文献

どうやってjustのテスト結果をページに転送しますか?

Justテストの結果がブラウザにどう表示されるかについての問題

.
文書

Jest公式文書:https://jestjs.io/docs/en/getting-started.html

jst-html-report公式文書:https://github.com/Hargne/jest-html-reporter/wiki/configuration