反応試験入門

状況を考慮すると、アプリケーション全体を構築し、今、あなたは他の人がそれを使用できるように、Web上でそれを解放したい.しかし、あなたのアプリケーションがいくつかの条件で失敗する恐れがあります、そして、あなたのユーザーは文句を言い始めるかもしれません.
いくつかのバグが再現される可能性があります.それは初心者としてあなたに影響を与えないかもしれませんが、大規模な生産アプリケーションでは、あなたが住んでいるときに失敗するアプリのリスクを取ることはできません.
それで、どのように、あなたはこれが決してあなたに起こらないことを確認しますか?
答えはテストです.

それでは、正確にテストですか？

テストはあなたのコードがどのように実行されるかについての1行ごとのレビューです.あなたのアプリケーションのために書かれたスクリプトを実行するコードのいくつかの部分を書いて、結果が理想的な条件で所望の出力と一致することを確認します.
あなたのコードにいくつかの更新を行うとき、またはオープンソースに貢献するとき、テストは便利です.コードを更新した後、アプリケーションで既に機能が中断しないようにテストを実行できます.
具体的には、実際のユーザーがそれを行うときに発生する可能性のあるエンドケースや境界条件をテストします.
ユーザーが何らかの無効なデータを入力したときのアプリケーションの動作または、セキュリティ問題やそのようなものがあります.
テストがどんな開発プロセスの不可欠な部分であると言うことができます.あなたはそれを無視することはできません.

私は、あなたの前の書かれたコードが適切に働くかどうかチェックするコードの断片を書くために時々退屈なことができるということを知っています、しかし、一旦それの把握を得るならば、あなたはテストの概念が好きです.

テストはあなたを助けます。

アプリケーションの各部分を手動でチェックする時間を保存します.ちょうどいくつかのコードを書いて、プロセスを自動化してください.

バグがそれ自体を再現しないことを確認してください.バグを修正するときはいつでも、それを繰り返すことのないテストケースを書くことができます.

あなたのコードの柔軟性を改良して、それ以外のそれをより保守的にしてください

そして、より多く...
すぐにテストの種類を越えることができます.

1単位試験

単体テストでは、コードの個々の部分をテストしたり、名前が示すように、コードの単位部分が完全に一緒にフィットを確認するために参照します.
特に反応について話して、単体テストは典型的にブラウザを必要としません.レンダリング出力をテストします.状態変更または指定された入力変更のセットが発生したときに何が起こるかのように変更します.

機能検査

機能テストは、我々のコンポーネントの振舞いをテストすることに集中します.
例えば、コンポーネントが個々に適切にレンダリングされているかどうかは、コンポーネントのonClick関数がうまく動作しないか、またはNavbarはログインしている人の名前を正しく表示します.
機能テストは、通常、分離(すなわち、残りのアプリケーションなしでコンポーネント機能性をテストする)で動きます.

統合試験

統合テストは、我々のアプリケーションの全体のサービスをテストし、エンドユーザーは、アプリケーションを使用して経験する経験を複製する試み.
統合テストは一般的に単位と機能テストよりも遅いです.
あなたが煙テストと浅いレンダリングのように遭遇するかもしれない他の多くの用語がありますが、これは簡単に物事を維持しましょう.

ゼストと酵素入門

Jestはノード環境でテストの高速並列実行に使用されるノードベースのテストランナーです.これは、テスト目的の最も使用されるフレームワークの一つです.
ジェストはシンプルに焦点を当てている.それは、NPMまたは糸でインストールされることができます.それは他のアプリケーションと同様に反応のために優れた作品.
インストール後、テストを書いて、アプリケーションディレクトリ内の端末ウィンドウでコマンドを実行します.これはJestを初期化し、ウォッチモードでのテストを開始します.
酵素は、反応のアプリケーションをテストするために使用されるライブラリです.コンポーネントをテストするように設計されており、UIが正しく動作しているかどうかを確認するアクションをシミュレートするアサーションを書くことができます.
Jestと酵素はとてもよく補足しますので、この記事では両方を使います.
Mochaなどの他のテストフレームワークもあります.
しかし、現時点では、Jestの設定から始めましょう.

JESTの設定

場合は、任意の新しい反応アプリを設定するための作成反応アプリを使用すると、それをインストールする必要はありませんので、事前にインストールされて付属しています.
手動でjestをインストールしたい場合は

npm install --save-dev jest

端末で.パッケージ内で.JSONファイル、テストを実行するためのコマンドを設定します.

...
scripts: {
 "test": "jest",
 ...
}

Jestで最初のテストを書く

さて、今、あなたがする必要があるすべてのテストを書くファイルを作成します.
しかし、どのように、ジェストはテストファイルであるかを知っていますか?
一般的に、これがテストファイルであることをjestに伝える2つの方法があります.

あなたのディレクトリのどんなファイルも名前テストがあるならば、それはテストと考えられます.

ファイルが接尾辞がある場合.Spec . jsまたは.テスト.JSはテストファイルとしてマークされます.

それで、Jestはあなたのディレクトリを通してそのようなファイルを探してスキャンして、それらの中のコードを実行します.そして、それはあなたのテストです.
行動中のコードを見ましょう.
ファイルをホームと呼びます.テスト.JSとそれに続くすべてのコード

describe('Our first test', () => {

  it('Multiplies numbers', () => {
      expect(5 * 10).toEqual(50);
      expect(20 * 50).toEqual(1000);
   });

このコードを理解しましょう.

description ()は、類似した型のテストをラップするために使用されます.テストの結果、またはテストのこれらのグループの目的は何ですか?

1 ()は単一のテストを定義するために使用されます.これは、特定のテストや関数が何を達成しようとしているかについて説明します.代わりにtest ()メソッドを使用することもできます.

関数toequal ()は、実際にテストを実行する場所です.関数の実際の結果を取得し、期待結果はtoequl ()に入ります.両方が一致するならば、テストは通過します、さもなければ、彼らは失敗します.

次のコードをノードtestコマンドで実行します.あなたは、コンソールには、テストに関連する多くの情報を与えるレイアウトのような美しいテーブルに気づくでしょう.例えば、それが通過したか失敗したかは、どの線、それがかかった時間、および他の多くのものにも失敗しました.
今のところ、パスと失敗に集中しましょう.上記のコードは間違いない.しかし、もし我々がこのようなものをパスするならば.

describe('Our second test', () => {

  it('Multiplies numbers', () => {
      expect(5 * 10).toEqual(25);
   });

これは失敗したテストに終わります、そして、あなたはWordがコンソールに点滅するのを見るでしょう.
ハーレー、あなたの最初のテストを書いた.
もちろん、現実世界のテストは、この単純されませんが、これは確かにどのようなテストは、実際のように見えるとジェストの簡単な紹介の一般的な概要を提供します.
ジェストは非常にフレンドリーなフレームワークです.それはあなたのテストが失敗した場所を正確に指示し、同様に内側の洞察を与えた.
さて、Jestを使用して再生でき、JavaScriptコードのテストを開始できます.
あなたが反応成分をテストしてみたいならば、この酵素フレームワークがあります.

酵素を用いた反応成分の試験

酵素は、作成反応アプリを事前に来ていないので、手動でコマンドを使用してインストールする必要があります.

npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
//or with yarn
yarn add --dev enzyme enzyme-adapter-react-16 react-test-renderer

注-酵素のインストールは、あなたが使用している反応のバージョンに依存します、ここで、我々はReCT - 16を使います
酵素を使うために、我々はちょうど我々がちょうど反応を使用するためにインストールされたパッケージを構成しなければなりません.srcフォルダ内のjsと次のコードを追加します.
それは、我々がちょうど酵素パッケージでインストールされるアダプターを使います.

// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

我々は今、我々のテストの酵素を使用することができます.
テストして追加するコンポーネントの名前を持つファイルを作成します.テスト.アフター・イット.
以下のコードを書き留めてください.

// MyComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe("MyComponent Render Test", () => {
  it("should render my component properly", () => {
    const wrapper = shallow(<MyComponent />);
  });
})

再び、記述はテストのグループの目的を記述するのに用いられます、そして、it ()関数は特定のテストが何か定義されるかを指定します.
shlose ()のアサーションメソッドは酵素の一部です.ここで注意することの1つは、コンポーネントに存在する可能性のあるすべての子コンポーネントを無視するためです.
子プロセスをテストする場合は、代わりにmount ()関数を使用します.この関数は、コンポーネント全体とその子に対して統合テストを行います.
これは、酵素を使用しているコンポーネントをテストする最も簡単な例です.旅はここで終わりません.実際のアプリケーションのテストを開始する前に、他の多くのものを知る必要があるでしょう.
あなたがテストについてもっと知りたいならば、特に反応でテストしてください、そして、Jestのドキュメンテーションをチェックして、反応してください.そこにはたくさんの役に立つものがあります.

更なる読書

Jest docs for react testing

react docs testing overview

覚えておいてください.
テストが最初にテストされていなければ失敗しません
この原則に従わないでください.😂
Daily すべての新しいタブを最高のプログラミングニュースを提供します.私たちはあなたのための資格のソースの数百人は、将来をハックできるようにランク付けされます.