Jest+Enzymeに基づくReactユニットテスト

前言
Reactユニットのテストを学びたいなら、この文章から始めましょう.Starプロジェクト、cloneは地元に行きます.教程によって一回歩きます.どんな問題がありますか?issue討論を歓迎します.
プロジェクトGitHubアドレス:react-test-demo
記事の主な内容は以下の通りです.*JestとEnzymeの基本的な紹介*テスト環境構築*テストシナリオ作成*UIコンポーネントテスト*Reducerテスト*実行とデバッグ*参考資料
Jest、Enzyme紹介
JestはFacebookのオープンソースであり、Jasmineフレームに基づくJavaScriptユニットテストツールです.内蔵したテスト環境DOM APIのサポート、断言ライブラリ、Mockライブラリなどを提供し、Spapplet Testing、Instant Feedbackなどの特性も含まれています.
AirbnbオープンソースのReactテストクラスのEnzymeは簡潔で強力なAPIを提供し、jQueryスタイルでDOM処理を行い、開発体験はとても友好的です.オープンソースコミュニティだけでなく、Reactオフィシャルのオススメもあります.
テスト環境の構築
Reactアプリケーションを開発した上で(デフォルトではWebpack＋Babelでパッケージ化してアプリケーションを構築する)、Jest Enzymeと対応するbabel-jestをインストールする必要があります.

npm install jest enzyme babel-jest --save-dev

npm依存パッケージをダウンロードした後、package.jsonに属性を追加する必要があります.Jestを設定します.

  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
      ".*\\.(css|less|scss)$": "/__mocks__/styleMock.js"
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  },

test scriptsを追加しました.

"scripts": {
    "dev": "NODE_ENV=development webpack-dev-server  --inline --progress --colors --port 3000 --host 0.0.0.0 ",
    "test": "jest"
  }

ここで、＊moduleFileExtensions:ローディングをサポートするファイル名を表し、Webpackのresolve.extensionsと同様に＊moduleNameMapper:Mockを必要とするリソース名を表す.Mock静的リソース(例えば、less、scssなど)が必要であれば、Mockを構成する経路/__mocks__/yourMock.js*transformをES 6/ES 7文法のコンパイルに用いる必要があり、babel-jestに協力して使用する必要がある.
上の3つはよく使われている構成で、より多くのJest構成は公式文書を参照してください.
テストスクリプトの作成
UIコンポーネントテスト
環境の構築が終わったら、テストシナリオを書き始めることができます.始める前に、Todoアプリケーションの構成部分を分析します.
応用主体構造は以下の通りである.

class App extends Component {
  render() {
    const { params } = this.props;
    return (
      <section className="todoapp">
        <div className="main">
          <AddTodo />
          <VisibleTodoList filter={params.filter || 'all'} />
        div>
         <Footer />
      section>
    )
  }
}

アプリケーション全体は、＊最外層のsrc/component/App.js＊中間のInput入力ボックス＊下のTODOリスト＊の3つのコンポーネントに分けることができることが分かった.はUIコンポーネントであり、およびはスマートコンポーネントであり、対応するUIコンポーネントおよびを見つける必要がある.は入力ボックスです.文字入力を受けて、リターンキーを押して、Todoを作成します.コードは以下の通りです.

import React, { Component, PropTypes } from 'react'
class AddTodoView extends Component {
  render() {
    return (
      <header className="header">
        <h1>todosh1>
        <input
          className="new-todo"
          type="text"
          onKeyUp={e => this.handleClick(e)}
          placeholder="input todo item"
          ref='input' />
      header>
    )
  }

  handleClick(e) {
    if (e.keyCode === 13) {
      const node = this.refs.input;
      const text = node.value.trim();
      text && this.props.onAddClick(text);
      node.value = '';
    }
  }
}

このコンポーネントの機能を理解した後、まず、どのような点をテストする必要があるかを明確にする必要があります.*コンポーネントは正常にレンダリングされていますか?Inputによって送達されるsrc/component/AddTodoView.js方法は起動されないはずです.
上記の分析を経て、私たちはユニットテストスクリプトの作成を開始することができます.
ステップ1:関連libの導入

import React from 'react'
import App from '../../src/component/App'
import { shallow } from 'enzyme'
         `shallow`   ，   `Enzyme`     API   ，    **   **。             ，         ，         。             、           。

propsはまた、他の2つのAPI:*onAddClick(text):Full Renderingを提供しており、DOM APIにインタラクティブコンポーネントが存在するか、またはコンポーネントの完全な宣言周期*propsが必要であり、Reactコンポーネントを静的なHTMLにレンダリングし、生成されたHTML構造を分析するのに非常に適している.onAddClick(text)によって返されたEnzymeは、他の2つのAPIと同様である.違いは、mountが、第三者HTML解析器およびrenderを使用していることである.
一般的には、renderは十分に使われていますが、場合によってはwrapperを使用します.
第二ステップ:アナログProps、レンダリングコンポーネント作成Wrapper
このステップは、render関数を作成して実装できます.

const setup = () => {
  //    props
  const props = {
    // Jest    mock   
    onAddClick: jest.fn()
  }

  //    enzyme     shallow(   )     
  const wrapper = shallow(<AddTodoView {...props} />)
  return {
    props,
    wrapper
  }
}

Cheerioに関数が含まれている場合は、Jestが提供するmockFunctionを使用する必要があります.
ステップ4:Test Caseを作成する
ここのCaseは私達の前の分析に基づいてテストが必要な点を編纂します.
Case 1:コンポーネントが正常にレンダリングされているかをテストします.

describe('AddTodoView', () => {
  const { wrapper, props } = setup();

  // case1
  //        Input,        
  it('AddTodoView Component should be render', () => {
    //.find(selector)   Enzyme shallow Rendering      ,       
    //       Enzyme    http://airbnb.io/enzyme/docs/api/shallow.html
    expect(wrapper.find('input').exists());
  })
})

最初のテストケースを書き終わったら、テストの効果を見てみます.Terminalにshallowを入力すると、効果は以下の通りです.
Case 2:内容を入力し、リターンキーを押して、コンポーネントがpropsを呼び出す方法をテストします.

  it('When the Enter key was pressed, onAddClick() shoule be called', () => {
    // mock input     Enter  
    const mockEvent = {
      keyCode: 13, // enter   
      target: {
        value: 'Test'
      }
    }
    //    Enzyme     simulate api    DOM   
    wrapper.find('input').simulate('keyup',mockEvent)
    //    props.onAddClick      
    expect(props.onAddClick).toBeCalled()
  })

上記のコードは第1のcaseと2点多くなりました.＊DOMイベントをシミュレートするためのmount＊setupによって提供されたPropsを使用して、イベントをシミュレートするためのnpm run testを追加しました.ここでのmockEventは、自動的にReactコンポーネントのEnzymeに変換して呼び出します..simulate(’keyup‘, mockEvent)を運転してテストの効果を見ます.
上の二つのTest Caseの分析を経て、次のCase 3とCase 4の考え方も同じです.具体的な書き方はコードに見られます.test/component/AddTodoView.spec.js、ここでは一つ一つ説明しません.
Reducerテスト
Reducerは純粋な関数なので、Reducerのテストは非常に簡単です.Redux公式文書もテストの例を提供しています.コードは以下の通りです.

import * as actions from '../../src/actions/index'
import * as types from '../../src/constants/actionTypes'

describe('actions', () => {
  it('should create an action to add a todo', () => {
    const text = 'Finish docs'
    const expectedAction = {
      type: types.ADD_TODO,
      text
    }
    expect(actions.addTodo(text)).toEqual(expectedAction)
  })
})

デバッグとテストのカバー率報告
スクリプトを実行する過程では、keyupのエラーメッセージが友好的であり、エラー情報を通じて問題点が一般的に見つけられます.onKeyUpはまた、npm run testというパラメータを追加するだけで生成可能であり、テストカバレッジ報告を生成するコマンドを提供する.端末にだけ表示されません.
また、プロジェクト中にJestフォルダを生成するので、とても便利です.
資料

just+enzymeを使ってreactプロジェクトテストを行います.

フロントエンド自動化試験

について話してください.

Enzyme API

Jest