フロントエンド単体テストフレームワークの詳細な紹介

はじめに

フロントエンドエンジニアリングという概念の登場により、プロジェクト開発におけるフロントエンドのコード量は「急増」したとも言えますが、この場合、コードの品質をどのように確保すればよいのでしょうか。 ? React や Vue などのフレームワークの場合、独自の文法規則があり、開発者ごとにコーディングスタイルの仕様が異なりますが、最終的な出力は似ており、コードの品質の差はそれほど大きくありません。いくつかの基本的なクラスライブラリやメソッドを使用する場合は、注意深く慎重に行う必要があり、コードの品質は高くなければならず、バグは可能な限り回避する必要があります。

では、高品質のコードを作成するにはどうすればよいでしょうか?ことわざにあるように、「単体テストを省略して、注意を払わずに QA テストに任せる者は不正行為です」 (この文は私が作成しました)。Mocha は Javascript Let's 用の単体テストツールです。使い方を見てみましょう

コンセプト

Mocha: Javascript テストフレームワーク

chai: アサーションライブラリ、Mocha と一緒に使用する必要があります

最も簡単な使用法

ステップ 1: インストール

既存のプロジェクトで単体テストを実行します

Mochaをインストールします

/*全局安装*/
$ npm  --global mocha　　

/*局部安装*/
$ npm install --save-dev mocha

ログイン後にコピー

chaiをインストールします

/*局部安装*/
$ npm  --save-dev chai

ログイン後にコピー

グローバルとローカルの違い: ローカルインストールの場合、依存関係は依存関係に書き込まれますまたは package.json の devDependency を使用すると、他の人があなたの Github からコードをクローンするときに、「すべての依存関係が欠落している」ことに注意を払う必要がなくなります。「他の依存関係をインストールする必要がありますか?」「npm install」はすべての依存関係をローカルにダウンロードするため、この種の問題が発生するまで待ちます

ステップ 2: JS ソースファイルとテストファイルを作成する

ソースファイル

     x +   module.exports = add;

ログイン後にコピー

テストファイル

  add = require('./add.js'  expect = require('chai'  describe('加法函数的测试',    it('1 加 1 应该等于 2',      expect(add(1, 1)).to.be.equal(2    it('1 加 -1 应该等于 0',      expect(add(1, -1)).to.be.equal(0  });

ログイン後にコピー

ステップ 3: テストファイルを実行します

$ mocha add.test.js

ログイン後にコピー

スクリーンショットを実行します:

上記は Mocha を使用する最も簡単な方法です。非常に簡単です O(∩_∩)O はは~、それについては以下で説明しましょう上級者向けに注目してください

進歩への道

上級者向け 1: description と it とは何ですか?

説明: 「テストグループ」は、テストブロックとも呼ばれ、グループに相当する一連のテストを実行したいことを意味します。

it: 「テスト項目」は、テストケースとも呼ばれ、これが「一連のテスト」 1 つのアイテムがアイテムに相当します。それをテストするにはどうすればよいですか?テストロジック?これらはすべてコールバック関数に実装されています

上級 2: え?記述には「ライフサイクル」もありますか？

各テストブロック (記述) には 4 つのサイクルがあり、次のとおりです:

 1 describe('test', function() { 2   // 在本测试块的所有测试用例之前执行且仅执行一次 3   before(function() { 4      5   }); 6   // 在本测试块的所有测试用例之后执行且仅执行一次 7   after(function() { 8      9   });10 11   // 在测试块的每个测试用例之前执行（有几个测试用例it，就执行几次）12   beforeEach(function() {13     14   });15   // 在测试块的每个测试用例之后执行（同上）16   afterEach(function() {17     18   });19   20   // 测试用例21   it('test item1', function () {22 23   })24 });

ログイン後にコピー

上級 3: 上級 2 では、サイクルコードは ES6 スタイルであり、トランスコーディング用の Babel モジュールをインストールする必要があります

ここにあります2 部構成のシナリオ: 1. グローバルインストール 2. ローカルインストール

babel がグローバルにインストールされている場合、グローバル Mocha を使用して babel-core モジュールを呼び出す必要もあります

$ npm  -g babel-core babel-preset-es2015
$ mocha --compilers js:babel-core/register

ログイン後にコピー

しかし、babel がローカルにインストールされている場合、ローカルの Mocha を使用して babel-core モジュールを呼び出すつもりです

$ npm install --save-dev babel-core babel-preset-es2015
$ ../node_modules/mocha/bin/mocha --compilers js:babel-core/register

ログイン後にコピー

なぜですか? Mocha は独自のパスに基づいて babel モジュールを検索するため、グローバルはグローバルに対応し、ローカルはローカルに対応する必要があります。非常に重要な手順が欠けています。テストする前に、babel トランスコーディングルールを設定する必要があります。プロジェクトのルートディレクトリ。「ルートディレクトリである必要がある」ことを覚えておいて、新しい .babelrc ファイルを作成します。このファイルは babel が使用するためのものです

// .babelrc{  "presets": [ "es2015" ] //这里制定使用es2015规则转码}

ログイン後にコピー

上級 4: テストは非同期にできますか?

非同期テストと通常のテストの違いは何ですか: テストケースのコールバック関数には追加のパラメーターが実行されます

 1 var add = require('../src/add.js'); 2 var expect = require('chai').expect; 3  4 describe('加法函数的测试', function() { 5   // 异步测试 6   it('1 加 1 应该等于 2', function(done) { 7     var clock = setTimeout(function () { 8       expect(add(1, 1)).to.be.equal(2); 9       done(); // 通知Mocha测试结束10     },1000);11   });12 13   // 同步测试14   it('1 加 0 应该等于 1', function() {15     expect(add(1, 0)).to.be.equal(1);16   });17 });

ログイン後にコピー

非同期テストについて注意すべき点が 1 つあります。done は手動で呼び出す必要があります。そうでない場合、非同期テストは以下のコードと実行中のスクリーンショットを参照してください:

コード:

 1 var add = require('../src/add.js'); 2 var expect = require('chai').expect; 3  4 describe('加法函数的测试', function() { 5   // 异步测试 6   it('1 加 1 应该等于 2', function(done) { 7     var clock = setTimeout(function () { 8       expect(add(1, 1)).to.be.equal(2); 9       //done();我们不主动调用done，看看会发生什么？10     },1000);11   });12 13   // 同步测试14   it('1 加 0 应该等于 1', function() {15     expect(add(1, 0)).to.be.equal(1);16   });17 });

ログイン後にコピー

実行中のスクリーンショット:

実行結果から、テストケース 1 が失敗したことが簡単にわかり、Mocha は次のようにプロンプトを表示します。は非同期テストまたはフックです。その場合は必ず実行してください。メソッドが呼び出されます。そうしないとテストは失敗しますが、他のユースケースには影響しません

それでは、非同期テストの適用シナリオは何でしょうか?それがテストデータインターフェイスで、これを行うことができます:

1 it('异步请求测试', function() {2   return fetch('https://api.github.com')3     .then(function(res) {4       return res.json();5     }).then(function(json) {6       expect(json).to.be.an('object'); // 测试接口返回的是否为对象类型的数据，也就是json格式7     });8 });

ログイン後にコピー

上級 5: 特定のテストケースのみを実行したい場合はどうすればよいでしょうか?または、特定のユースケースを除いて、他のすべてが実行されます

Mocha には、only と Skip

1 の 2 つのユースケース管理 API があります。特定のユースケースのみを実行したい場合は、それを唯一の方法で呼び出します:

。れーれー

运行截图：

可以看出，第三个用例并没有被执行

2.如果想跳过某个用例，我们就用skip方式调用它：

 1 var add = require('../src/add.js'); 2 var expect = require('chai').expect; 3  4 describe('加法函数的测试', function() { 5  6   it('1 加 1 应该等于 2', function() { 7     expect(add(1, 1)).to.be.equal(2); 8   }); 9 10   // 同理，skip方式执行的用例在同一组内也可以有多个11   it.skip('1 加 0 应该等于 1', function() {12     expect(add(1, 0)).to.be.equal(1);13   });14 15 16   it.skip('1 加 -1 应该等于 0', function() {17     expect(add(1, -1)).to.be.equal(0);18   });19 20 });

ログイン後にコピー

运行截图：