私たちはそれぞれ、テストは役に立たず、多くの労力を必要とし、実際、彼のコードは非常に優れているのでテストは必要ないと主張する開発者に出くわしました。 信じないでください。 テストは非常に重要です。
テストはコードをより安定させ、バグの数を減らします。 あなたはあなたのコードのすべてのビットを知っているので、これはそうではないようです。 結局のところ、あなたはそれを書いたのに、なぜ他の人がテストするのですか？
天気アプリを作成しているとします。 あなたは数日または数週間コードを書いたので、あなたはそのコードを知っています。
ここで、アプリケーションの作業が完了し、数か月後にアプリケーションに戻ると想像してください。 古いコードのすべての詳細を覚えているわけではありません。 あなたはそれを変えます...そして地獄...何かが壊れています。 これをどのように修正しますか？ 作成した各ファイルを見て、再び機能するように構成しますか？ たぶんそうでしょう。 ただし、このファイルを変更すると、他の何かが壊れます。
別の例を見てみましょう。 数ヶ月のハードワークの後、あなたはついに望んでいたポジションを得ました！ チームに参加して、何かを作成し始めます。 他の開発者のコードを使用して作業します。逆の場合も同様です。 そしてある日、すべてが壊れます。 チームがテストをアプリケーションに統合していない場合、私はあなたをvy望しません。
各チームは、ソフトウェアまたはアプリケーションを作成するときにテストを作成する必要があります。 あなたはテストする方法を知らない人になりたくないですか？
はい、テストの作成には時間がかかります。 はい、最初は難しいです。 はい、アプリケーションの作成はより興味深いものです。 しかし、テストは重要であり、正しく実装されていれば時間を節約できます。
今日の私の目標は、テストスキルを向上させることです。 Jest（JavaScriptテストツール）を使用したテストを通じて、ユニットテストと開発を見ていきます。 もちろん、MochaやChaiなど、使用できる他のテストツールもあります。
さあ始めましょう！
単体テスト
アプリケーションのテストを決定すると、ユニットテスト（ユニット）、統合テスト、機能テストなどのさまざまなタイプのテストに直面します。 単体テストについて説明します。
機能テストと統合テストも同様に重要ですが、単体テストよりも構成と実装が困難です。 簡単に言うと、ユニットテストはコードの小さな部分（関数、クラスメソッドなど）のテストで構成されています。データを入力に送信し、期待どおりの結果を受け取ったことを確認します。
ユニットテストの利点：
- コードをより安定させます。
- 機能の動作を変更せずに、機能の実装の変更を容易にします。
- コードを文書化します。 すぐに理由がわかります。
- 適切な設計を行います。 実際、不十分に設計されたコードは、多くの場合、テストがより困難です。
テストによる開発（TDD）
テストを通じて開発を理解して使用するには、次の2つのルールを覚えておいてください。
- コードを書く前に失敗するテストを書いてください。
- 次に、テストに合格できるコードを作成します。
TDDを使用する場合、「赤、緑、リファクタリング」ループについて話します。
赤：コードを記述せずに失敗したテストを記述します。
緑：テストに合格できる最も単純なコードを記述します。 たとえコードがあなたにとって最も愚かに思えても。
リファクタリング：必要に応じて、コードのリファクタリング。 コードを変更しても、何かがうまくいかなくてもユニットテストが壊れても心配する必要はありません。
テストファイルの構造化
Jestは、テストを構造化するための機能を提供します。
describe：テストをグループ化し、関数/モジュール/クラスの動作を説明するために使用します。 2つのパラメーターが必要です。 最初は、グループを説明する行です。 2番目は、テストケースまたはフック関数を持つコールバック関数です。
それまたはテスト：単体テスト。 パラメーターは、describeと同じです。 説明的でなければなりません。 テストの命名はあなた次第ですが、「Should」から始めることができます。
beforeAll（afterAll）：すべてのテストの前（および後）にフック関数が実行されます。 1つのパラメーターを取ります。これは、すべてのテストの前（および後）に実行する関数です。
beforeEach（afterEach）：各テストの前（および後）に実行されるフック関数。 パラメーターを1つ取ります。これは、各テストの前（および後）に実行する関数です。
テストを作成する前に、次のことを知っておく必要があります。
describeとitで .skipを使用してテストをスキップできます： it.skip（...）またはdescribe.skip（...） 。 .skipを使用して、テストまたはグループを無視するようにJestに指示します。
describeとitで .onlyを使用して、実行するテストを正確に選択できます： it.only（...）またはdescribe.only（...） 。 これは、多数のテストがあり、1つのことだけに集中したい場合、またはテストを「デバッグ」したい場合に便利です。
Jestのセットアップ
上記で調べたテスト機能を表示するには、Jestを構成する必要があります。 とても簡単です。
Node.jsとnpmまたはYarnのみが必要です。 ES6を使用するため、Node.jsの最新バージョンを使用していることを確認してください。 新しいディレクトリを作成して初期化します。
mkdir test-example && cd test-example npm init -y # OR yarn init -y
-yは、すべてのnpmまたはyarnの質問に「はい」と答えます。 彼は非常に単純なpackage.jsonファイルを作成する必要がありました。
次に、 Jestを開発環境に追加します。
yarn add jest --dev
次に、次のスクリプトをpackage.jsonに追加します。
"scripts": { "test": "jest" }
yarn testは、ディレクトリ内のテストファイルを実行します。 デフォルトでは、Jestは__tests__ディレクトリ内のファイル、または.spec.jsまたは.test.jsで終わるファイルを認識します。
以上です。 最初のテストを書く準備ができていますか。
マッチャー（サンプル）
何かをチェックするときは、入力と期待される結果が必要です。 これが、Jestが値をテストするサンプルを提供する理由です。
expect(input).matcher(output)
Jestには多くのサンプルがありますが、ここに最も重要なものがあります。
toBe：厳密な等価性（===）を比較します。
expect(1 + 1).toBe(2) let testsAreEssential = true expect(testAreEssential).toBe(true)
toEqual：2つの変数、配列、またはオブジェクト間で値を比較します。
let arr = [1, 2] arr.push(3) expect(arr).toEqual([1, 2, 3]) let x= 1 x++ expect(x).toEqual(2)
toBeTruthy（toBeFalsy）：値がtrue（またはfalse）かどうかを示します。
expect(null).toBeFalsy() expect(undefined).toBeFalsy() expect(false).toBeFalsy() expect("Hello world").toBeTruthy() expect({foo: 'bar'}).toBeTruthy()
toContain：配列に要素が含まれているかどうかを確認します。
expect(['Apple', 'Banana', 'Strawberry']).toContain('Apple')
toThrow：関数がエラーを引き起こしているかどうかを確認します。
function connect () { throw new ConnectionError() } expect(connect).toThrow(ConnectionError)
最初のテスト
次に、最初のテストを作成し、機能を使用します。 最初にディレクトリにexample.spec.jsファイルを作成し、次を貼り付けます。
describe('Example', () => { beforeAll(() => { console.log('running before all tests') }) afterAll(() => { console.log('running after all tests') }) beforeEach(() => { console.log('running before each test') }) afterEach(() => { console.log('running after each test') }) it('Should do something', () => { console.log('first test') }) it('Should do something else', () => { console.log('second test') }) })
使用するすべての関数をインポートする必要はないことに注意してください。 それらはすでにJestによって提供されています。
糸テストを実行します。
テストにはステートメントがないため、合格します。 異なるconsole.logの指示を見ましたか？ 関数とテストケースがどのように機能するかをよりよく理解する必要があります。
すべてのフック関数を削除し、最初のテストに.skipを追加します。
describe('Example', () => { it.skip('Should do something', () => { console.log('first test') }) it('Should do something else', () => { console.log('second test') }) })
糸テストを再度実行します。
最初のテストが機能しない場合でも大丈夫です。
3番目のテストを追加し、 .onlyを使用します 。
describe('Example', () => { it('Should do something', () => { console.log('first test') }) it('Should do something else', () => { console.log('second test') }) it.only('Should do that', () => { console.log('third test') }) })
糸テストを再度実行します 。
記事の第2部では、TDDを使用してJavaScriptでスタックの簡単な実装を行います。