前書き
あなたがアプリケーションを反応させるの開発している場合は、コミュニティは昨年、新しいアイデアやツールを破裂された反応することがわかっています。スタックに組み込むための新たな技術を調査すると、それはどちらかのワークフローがはるかに容易になり、または重要な問題を解決するかどうか、我々は考慮すべきです。MobXと酵素は、法案に合うリアクト世界で2つの新しいライブラリです。 このサンプルのToDoアプリケーションが 反応しMobXでビルドに信じられないほど簡単であり、この記事では、我々は反応し、酵素とMobX用ユニットおよびUI /機能テストをカバーします。
リアクトでのコードのにおい
そこでのビルドアプリケーションへの方法の不足が反応しないが、一つのことは確かである - それはあなたのアプリケーションの状態の上に座って、反応ビュー層として使用する場合に最も明るい輝く反応します。あなたはそれ以上のためにそれを使用する場合は、例えばUIを決定する際に、どのようにデータやUIが格納状態の特定の側面をロードするようにする責任があり、これはすぐにコードのにおいにつながることができます。
私たちは成長している厄介からプロジェクトに反応保つために、我々は完全に外UIのアプリケーションの状態を保存する必要が。これは、我々のアプリケーションより安定させるだけでなく、それはまた、我々は別にUIと状態をテストすることができて、非常に簡単なテストを行います。
MobXを入力します。
フラックス、再来とリレーのようなフレームワークやパターンはあなたにリアクトビュー層のアプリケーション外の状態を管理するための強力な手段を与えるが、それらは設定が複雑であり、それは簡単な変更を行うためにしばらく時間がかかることができます。MobXが急速に人気が高まっていることの大きな理由の一つは、それがある、非常にシンプルであるという事実である ほとんどのオブジェクトリテラルを符号化するような単純な 。手段は、アプリケーションの安定性を犠牲にすることなく、膨大な開発者の経験を得ること。
酵素とは何ですか？
それはテストに私たちをできるようになりますので、酵素は、選択の私達のテストツールになりますと部品を反応させるのjQueryのような構文。この手段の機能と統合スタイルのテストは、書き込みに簡単になります。
コードへのアクセス：
- あなたはGitHubの上のシンプルなTODOアプリケーションのコードを見つけることができます： learncodeacademy /反応-JS-チュートリアルを、
- 唯一の要件は、Node.jsのバージョン4以上であります
- それを取得し、実行し、入力し
npm install && npm startて、 - 上のアプリケーションにアクセスしてください
localhost:8080。
さて、このアプリケーションをテストするには取得してみましょう。
酵素と冗談をインストールします
モカは、酵素との素晴らしい作品が、冗談ではセットアップが少し簡単です。私たちの3テストの依存関係は次のようになります jest 、テストのために babel-jest 私たちのES6をtranspilingため、そして enzyme 私達の機能のためのテストを反応します。レッツ・クローンリポジトリは、その後、実行 npm install しても、それらの依存関係をインストールします。
gitのクローン[email protected]：learncodeacademy /反応-JS-tutorials.gitの CDが反応-JS-チュートリアル/ 6-mobxが反応し 、インストールNPM --save-devの酵素冗談バベル-冗談インストールNPM
これらのパッケージをインストールすると、冗談は完全に箱から出して設定されています。バベルはまだ限りバベルで構成されて偉大な動作します .babelrc ファイル。一部の人々はでバベルを設定する webpack.config.jsことはあなたです場合、あなたはそれを移動する必要があります、 .babelrc 冗談ので、ファイルおよびWebPACKの両方の使用が設定できます。
私たちは今、実行することができます jest 何のテストが見つからなかったことを、予告：
$冗談 冗談CLIのv14.1.0、jasmine2を使用して、バベル-冗談 NOが見つかりましたがテストされます。5つのファイルがチェック。 testPathDirs：/ユーザー/ CMN /コード/サンドボックス/反応-mobx - 5試合 testRegex：。__tests __ / * JS $ - 0一致する。 testPathIgnorePatterns：/ node_modules / - 5試合
MobXとのユニットテスト
MobXクラスはオブジェクトリテラルのように振る舞うので、テストは非常に簡単です。私たちのtodolistのストアをユニットテストすることから始めましょう。冗談はには何も実行されます __tests__ ので、私たちの最初のテストファイルと同様にディレクトリを作成するには、これらの2つのコマンドを実行してみましょう、デフォルトでディレクトリ。
MKDIR __tests__ タッチ__tests __ / TodoStore.test.js
ジャスミンは、我々がアクセス権を持っているので、冗談のデフォルトのランナーである describe、 itと expect 何も設定しなくても。我々は最初のテストを書くことにまっすぐに得ることができることをこの意味。
"../src/js/TodoStore"からインポート{TodoStore}
説明（ "TodoStore"、（）=> {
それ（ "新しいドスを作成"、（）=> {
CONSTストア=新しいTodoStore
store.createTodo（「todo1 "）
store.createTodo（" todo2 "）
期待（store.todos.length）.toBe（2）
期待（store.todos [0] .VALUE）.toBe（" todo1" ）は
（期待store.todos [1]。値）.toBe（ "todo2"）
}）
私たちは、新しいTodoStoreを作成したいくつかのアクションを行なったし、それは、オブジェクトリテラルであるかのように、結果を観察しました。MobXの最大の利点は、その単純です。任意のは、私たちが同様に任意のオブザーバーに渡されていたであろう行われた変更します。それは私たちが店のインポートことに注意することが重要です コンストラクタを { TodoStore } インスタンス化ストアでデフォルトのエクスポートを、そしてません。これが私たちの次のテストはうまくとして、独自の新鮮な店をインスタンス化することができます：
それ（（）=> { "クリアはドスをチェック"
CONST店=新しいTodoStore
store.createTodo（ "todo1"）
store.createTodo（ "todo2"）
store.createTodo（ "todo3"）
store.todos [1] .complete = TRUE;
store.todos [2] .complete = TRUE;
store.clearComplete（）
期待（store.todos.length）.toBe（1）
期待（store.todos [0] .VALUE）.toBe（ "todo1"）
}）
ユニットが所定の位置にテストを、私たちのUI層に対するいくつかのユニットテストを行うために酵素を使用してみましょう：
反応し、酵素とのユニットテスト
レッツ・ファイルを作成することであること：
タッチ__tests __ / TodoList.unit.test.js
MobX店がちょうどオブジェクトリテラルのように振る舞うので、ここでも、私たちは、コンポーネントを反応させるの当社テストすることができます店の状態をシミュレートするために、任意のオブジェクトリテラルでそれを注入することによって。我々は、単一を使用することができます beforeEach すべてのテストにこの状態を提供します：
「酵素」からインポート{浅い}
インポート「が反応する」からリアクト
「../src/js/TodoList」からインポートtodolistのは
、（ 『todolistの』を記述する関数（）{
//矢印関数を使用していない...保存します"この"の値
beforeEach （関数（）{
this.store = {
filteredTodos：[
{値： "todo1"、ID：111、完全：偽}、
{値： "todo2"、ID：222、完全：偽}、
{値： "todo3"、ID：333、完全：偽}
]、
フィルタ： "テスト"、
createTodo：（ヴァル）=> {
this.createTodoCalled =真
this.todoValue =ヴァル
}
}
}）
//テストはここに行くとthis.storeを受け取ることになります
）}
お知らせ私たちはどのように していない ためES6矢印の機能を使用しますか beforeEach？私たちは、の値ことを確認するには this 、同じまたは遺骨が this.store 我々のテストに渡されません。テストのためのコンテキストを使用する場合は、矢印の機能の使用を停止することをお勧めします。しかし、我々は したい 私たちの矢印関数を使用する createTodo ので、我々は設定することができ、機能 this.todoClicked と this.todoValue それが呼び出されたときに親コンテキストに。
さて、テストを追加することは簡単です。
//、矢印関数を使用し、「この」の値は保持しない
こと（「濾過ドスをレンダリング」機能（）{
CONSTラッパー=浅い（<todolistのストア= {this.store} />）を
（ラッパーを期待します。 （ "LIスパン"）を見つける。（0）の.text（））。戸部で（ "todo1"）
。で、（1）の.text（））。戸部（「todo2（wrapper.find（ "LIスパン"を期待） "）
（LIスパンwrapper.find（"）を期待"（2）の.text（））。被（AT" todo3" ）
}）
我々は、我々はすべての3ドスが正しく印刷されていることを確認することができ、私たちの店を注射したコンポーネントのラッパーを作成するために酵素を使用しています。それでは、コンポーネント上のいくつかのテストそのシミュレートユーザーとの対話を追加してみましょう：
それは（関数（）{ "入力にcreateTodoを呼び出し"
CONSTラッパー=浅い（<todolistのストア= {this.store} />）
wrapper.find（ "input.new"）。（0）で
.simulate（「キー押下"{13、目標：{値： 'newTodo'}}）
期待（this.createTodoCalled）.toBe（真）
（this.todoValue）.toBe（期待"newTodoを"）
}）
、それ（"アップデートストアフィルタ」、関数（）{
CONSTラッパー=浅い（<todolistのストア= {this.store} />）
wrapper.find（ "input.filter"）で（0）。
.simulate（ '変更'、{目標：{値'フィルタ'}}）
（this.store.filter）.toBe（"フィルタ"）を期待
）}
酵素が簡単にシミュレートリアルJSイベントに私たちをことができます。最初の引数は、 simulate イベント型であり、第2引数は、イベント・オブジェクトです。今、私たちは、コンポーネントの呼び出していることが確認されている createTodo 変更されたときにフィルタを更新トドスが作成されているとも。
統合テスト
コンポーネントが一緒に彼らが必要ように動作することを毎日のようにして、あなたはテストにそれが役に立つかもしれません。あなたが反応しMobXでこれを行うにしたい場合、あなたは単に本当MobXストアで模擬店を置き換える必要があります。作成 TodoList.functional.test.js し、これを追加します。
インポート{浅い}「酵素」から
インポート「が反応する」からリアクト
「../src/js/TodoList」からインポートtodolistの
「../src/js/TodoStore」からインポート{TodoStore}
、（『TodoList.functional』を記述します（）=> {
それ（ "フィルタードス"、（）=> {
CONSTストア=新しいTodoStore
store.createTodo（ "todo1"）
store.createTodo（ "todo2"）
store.createTodo（ "todo3"）
store.filter = "2"
CONSTラッパー=浅い（<todolistのストア= {店} />）
期待（wrapper.find（ "LI"を）。長さ）.toBe（1）
（wrapper.find（ "LIスパン"）を期待。（AT 0）の.text（））。戸部（ "todo2"）
}）
}）
我々は同様に、実際のMobXストアで正しくコンポーネント振る舞うことを確認することができます。また、ユーザーとの対話が適切に店舗を変更することを確認することができます。
それ、（）=> {（ " 'クリア完了'がクリックされたクリアがドスを完了し、"
constの店=新しいTodoStore
store.createTodo（ "todo1"）
store.createTodo（ "todo2"）
store.createTodo（ "todo3"）
ストア.todos [0] .complete =真
store.todos [1] .complete =真
CONSTラッパー=浅い（<todolistのストア= {店} />）
wrapper.find（ ""）。シミュレーション（ "クリック"）
を期待（wrapper.find（ "LI"）。長さ）.toBe（1）
期待（wrapper.find（ "LIスパン"）。（0）の.text（）で）。被（ "todo3"）
（store.todosを期待.LENGTH）.toBe（1）
}）
私たちに注意 expect 下部には、私たちは、「クリア完了」リンクをクリックしたときにUIとストアの両方が適切に変更されたことを確認することができます。