Reactでのテスト

すべてのJS開発者は遅かれ早かれテストを書き始め、彼がこれを以前にやらなかったことを後悔しています。 過去数年にわたって、React、Angular、またはVueなどに基づいたコンポーネント開発に誰もが徐々に切り替えて以来、コンポーネントは通常小さく、テストがはるかに簡単であるため、テストの普及に別の推進力を与えました。 この記事では、Reactでのコンポーネントのテストについて説明します。



この記事で英語の用語を使用する必要があることを事前に謝罪します。 テストの分野で標準となっているいくつかのフレーズを翻訳すると、理解が失われ、追加情報の検索が複雑になります。



JSプロジェクトでテストを整理するために必要なユーティリティを見てみましょう。

• テストランナーは、テストでファイルを取得して起動し、テスト結果を表示するユーティリティです。 この分野で最も人気のあるユーティリティは、モカとカルマです。
• アサーションライブラリ-テストの条件をチェックするための一連の機能を備えたライブラリ。 ChaiとExpectは、この分野で最も使用されているライブラリです。
• モックライブラリ-テスト中にモックを作成するために使用されるライブラリ。 このユーティリティを使用すると、テスト対象のコンポーネントの接続部分を、目的の動作をシミュレートする「スタブ」に置き換えることができます。 ここで最も人気のある選択肢はシノンです。

Reactの既存のテストツールを検討し、これらのツールを使用した簡単なテストの例を示します。 プロジェクトアセンブリの構成方法やES6のトランスポートなどについては説明しません。Habréで必要な記事を探したり、見つけたりする場合は、このすべてを自分で調べることができます。 最後の手段として-書いて、私はあなたを助けようとします。



また、この記事の枠組みの中で、テストの分野で一般的な最も一般的なライブラリの「ブラインド」使用については検討しませんが、最近登場したライブラリを見て、それらが注目に値するかどうかを理解しようとします。

第1幕

最初に必要なのは、将来のテスト用のTestRunnerです。 約束どおり、このレビューではKarmaやMochaなどの一般的なユーティリティは対象外です。 新しいツール、Facebook Jestを検討してください。 Mochaとは異なり、Jestはセットアップ、プロジェクトへの統合が非常に簡単で、同時に非常に機能的です。 これは1年前はかなり「悲しい」プロジェクトでしたが、テストに必要な機能の多くが欠けていました。たとえば、可変機能ファイルを追跡する非同期機能や監視モードのテストはありませんでした。 現在、この製品はすでにかなり「魅力的」であり、モカやカルマなどのモンスターと競合できます。 さらに、メンテナは数年前には完全に欠けていた欠陥を迅速に修正し始めました。 それでは、Jestでできることを見てみましょう。

• 驚くほど簡単にプロジェクトに統合できます。
  
  Jestには必要なものがすべて含まれているため、数十個の小さなライブラリを配置して相互の対話を構成する必要はありません。 人気のあるKarma + Mocha + Sinon束をテストに少なくとも一度使用した人は理解できますが、残りは私の言葉を受け入れなければなりません。
  
  
  
  
• テストの実行とテスト結果の表示
  
  Jestには、検索を構成してテストを実行するのに十分なパラメーターが含まれているため、プロジェクトおよびタスク用にいつでも構成できます。
  
  
  
  
• assertライブラリが含まれていますが、他のライブラリに置き換えることができます
  
  JestはJasmineライブラリの2番目のバージョンに基づいているため、一度使用したことがあれば、構文はおなじみのように思えます。 ジャスミンが気に入らない場合は、お気に入りのライブラリを使用できます。
  
  
  
  
• 各テストを個別のプロセスで実行できるため、テストの実行を高速化できます
  
  
  
  
• 非同期コードを操作し、タイマーを使用してコードをテストできる
  
  
  
  
• インポートされたコンポーネントの「スタブ」を自動的に作成できる
  
  
  
  実際、これはJestの重要な機能の1つですが、構成するのはかなり困難です。 そのため、多くの人が一度にJestの使用を拒否し、新しいバージョンではデフォルトで無効になっています。
• インタラクティブなウォッチモードで動作可能
  
  
  
  Jestには非常にクールなインタラクティブモードがあり、変更されたコンポーネントのテストだけでなく、たとえば、gitの最後のコミット、最後の「失敗」テスト、または「パターン」を使用して名前で検索することもできます。
• テストでプロジェクトのカバレッジを収集できる（カバレッジ）
  
  
  
  
• jsdomが含まれているため、ブラウザなしでテストを実行できます
  
  
  
  
• スナップショットを使用してコンポーネントをテストできます

Jestができることはそれだけではありません。 このユーティリティの詳細については、公式Webサイトfacebook.github.io/jestをご覧ください。 ただし、Jestには次のような欠点もあります。

• Jestのドキュメントはかなり「無駄のない」ものであり、多くの場合、自分で答えを探し、githubまたはスタックオーバーフローについて調べなければなりません。
  
  
  
  
• ブラウザでテストを実行できません
  
  はい、プラスはマイナスでもあります。 確かに、私にとってこれは重大なマイナスではありません。 ブラウザによって表示が異なる可能性がある状況を回避しようとしています。
  
  
  
  
• テスト実行をゆっくり開始します。

スロースタートについて。 Jestチームは、テストの実行を高速化するために絶えず改善を行っています。 ドミトリー・アブラモフが彼らに加わった後、状況は大きく改善しました、これは確認されています。 それにもかかわらず、私の個人的な感情によると、カルマ+モカを使用して作成したテストは、Jestを使用して作成したテストよりも早く開始され、動作しました。 時間が経つにつれて、みんながこの欠点を取り除くことを願っています。



それでは、いくつかのテストを書いて、実際にどのように見えるか見てみましょう。 開始するには、2つの数値の合計を計算する単純な関数を使用します。

function sum(a, b) { return a + b; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数のテストは次のようになります。

 describe('function tests', () => { it('should return 3 for arguments 1 and 2', () => { expect(sum(1, 2)).toBe(3); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてがシンプルでおなじみです。 別の関数呼び出しを追加して、関数を複雑にしましょう。

 function initial() { return 1; } function sum(a, b) { return initial() + a + b; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アトミック要素に対して適切に構築されたテストでは、残りのコードへの依存関係をすべて除外する必要があります。 したがって、初期関数の誤った操作の可能性を合計関数のテストから除外する必要があります。 これを行うには、必要な値を返す初期関数の「スタブ」を作成します。 取得するテストは次のとおりです。

 describe('function tests', () => { it('should return 4 for arguments 1 and 2', () => { initial = jest.fn((cb) => 1); expect(sum(1, 2)).toBe(4); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで関数を複雑にして、まず、sum関数を非同期にし、次に、目的の結果を返す前に考える必要があると仮定します。

 function initial(salt) { return 1; } function sum(a, b) { return new Promise((resolve, reject) => { setTimeout(function(){ resolve({ value: initial(1) + a + b, param1: a, param2: b, }); }, 100); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

変更を考慮に入れるように、テストを終了します。

 describe('function tests', () => { beforeAll(() => { jest.useFakeTimers(); }); afterAll(() => { jest.useRealTimers(); }); it('should return 4 for arguments 1 and 2', () => { initial = jest.fn((cb) => 1); const result = sum(1, 2); result.then((result) => { expect(result).not.toEqual({ value: 3, param1: 1, param2: 2, }); expect(initial).toHaveBeCalledWith(1); }); jest.runTimersToTime(100); return result; }) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このテストでは、いくつかの新しいJest機能を適用しました。

• まず、時間を管理できるように、偽のタイマーを使用するように彼に依頼しました
• 第二に、非同期関数をテストする方法を見ました
• 第三に、テスト検証でネガとオブジェクト比較を使用する方法を見ました
• 4番目に、モック関数が必要なパラメーターで呼び出されたことをテストする方法を見ました

Reactコンポーネントをテストする方法を見てみましょう。 ユーザーに挨拶を表示し、表示されたテキストのクリックをキャッチする単純なコンポーネントがあるとします。

 export default class Wellcome extends React.Component { onClick() { this.props.someFunction(this.props.username); } render() { return ( <div> <span onClick={this.onClick.bind(this)}>Wellcome {this.props.username}</span> </div> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テストしてみましょう：

 import React from 'react'; import TestUtils from 'react-addons-test-utils'; import Wellcome from './welcome.jsx'; describe('<Welcome />', () => { it('Renders wellcome message to user', () => { const onClickSpy = jest.fn(); const username = 'Alice'; const component = ReactTestUtils.renderIntoDocument( <Wellcome username= {username} someFunction={onClickSpy} /> ); const span = TestUtils.findRenderedDOMComponentWithTag( component, 'span' ); TestUtils.Simulate.click(span); expect(span.textContent).toBe('Wellcome Alice'); expect(onClickSpy).toBeCalledWith(username); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ここでは複雑なことは何もありません。 React Test Utilsを使用してコンポーネントをレンダリングし、Domノードを検索します。 それ以外の場合、テストは通常​​のJestテストと変わりません。



そこで、Jestを使用してテストを作成および実行する方法を検討しましたが、先に進む前に、Jestのもう1つの機能であるスナップショットテストについて少し説明しましょう。 スナップショットテストは、ReactツリースナップショットをJSONオブジェクトとして保存し、それ以降のテスト実行で結果の構造と比較する機能です。



大まかに言って、そのような印象を形成するためのテストを初めて実行するときは、手でその妥当性を確認し、コードリポジトリにコミットします。 そして-出来事-テストのその後のすべての実行は、リポジトリからの印象を何が起こったかと比較します。



この機能は最近、Jestに登場しましたが、個人的には、私の革新が複雑な感情を引き起こしました。 一方では、使用するのが便利であることがわかりました-一部のテストは実際に簡単になりました（対話性がなく、実際に構造を確認するだけでよい場合）。テストでコードを複製する必要はありません。 一方、マイナスを見ました：私にとってのテストはコードのドキュメントであり、スナップショットに基づいたテストは本質的に「解放」する機会を与え、アサートを考慮することなく、2つのコンポーネントツリーを比較するだけです。 さらに、このアプローチでは、最初にコンポーネントテストを作成し、次にコード自体を作成するときに、古典的なTDDの可能性を奪います。 しかし、この機能は間違いなくファンを見つけると思います。



コンポーネントでどのように機能するかを見てみましょう。

 import React from 'react'; import renderer from 'react-test-renderer'; import Wellcome from './welcome.jsx'; describe('<Welcome />', () => { it('Renders wellcome message to user', () => { const onClickSpy = jest.fn(); const username = 'Alice'; const component = renderer.create( <Wellcome username={username} someFunction={onClickSpy} /> ); const json = component.toJSON(); expect(json).toMatchSnapshot(); expect(onClickSpy).toHaveBeCalledWith(username); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

具体的には、テストは大幅に簡素化されていません（既に簡単でした）。 構造がより大きなコンポーネントの場合、テストを半分に減らし、大幅に簡素化できます。 テストを実行して、何が起こるか見てみましょう。







それで、jestは私たちのために型を作りました。 キャストの内容は次のとおりです。

 exports[<Welcome /> Renders wellcome message to user 1] = ` <div> <span onClick={[Function]}> Wellcome Alice </span> </div> `;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この型は、コンポーネントのhtml構造を表し、「目で」検証するのに便利です。



上記の欠点に加えて、キャストに基づくテストの別の欠点に遭遇しました。 HOCコンポーネント（redux-formなど）を使用する場合、ナゲットにはテスト対象のコンポーネントは含まれませんが、redux-formのラッパーが含まれます。 したがって、コンポーネント自体をテストするには、それをエクスポートするとともに、redux-formを必要とするコントラクトをシミュレートする必要があります。



原則として、HOCコンポーネントが1つあれば大丈夫です。 しかし、たとえば、場合によっては3つ、react-reduxから1つ、redux-fromから2つ、react-intlから3つを持つことができます。 後者の場合、コンポーネントを「プラグイン」することができないため、コードをテストすることは非常に困難です。コンポーネントに正直なローカライズAPIを添付する必要があります。 これがどのように行われるか- ここで見ることができます 。



まとめると。 これで、コンポーネントでテストを実行するために必要なものがすべて揃いました。 しかし、テストを単純化して改善する方法をもう一度見てみましょう。

第2幕

Reactコンポーネントのテストについて最初に考え、これを行う方法に関する情報を探し始めると、テストユーティリティReact Test Utilitesのパッケージに遭遇する可能性があります。 このパッケージはFacebookチームによって開発されたもので、コンポーネントテストを作成できます。 このパッケージには、次の機能があります。

• DOMでのコンポーネントレンダリング
• DOM要素のイベントシミュレーション
• 「モッキング」コンポーネント
• DOMでアイテムを検索する
• 浅いコンポーネントのレンダリング

ご覧のとおり、一連の機能は非常に幅広く、コンポーネントのテストを作成するのに十分です。 React Test Utilitesを使用してテストがどのように見えるかの例は、前のセクションで分析しました。

 import React from 'react'; import TestUtils from 'react-addons-test-utils' import Wellcome from './welcome.jsx'; describe('<Welcome />', () => { it('Renders wellcome message to user', () => { const onClickSpy = jest.fn(); const username = 'Alice'; const component = ReactTestUtils.renderIntoDocument( <Wellcome username= {username} someFunction={onClickSpy} /> ); const span = TestUtils.findRenderedDOMComponentWithTag( component, 'span' ); TestUtils.Simulate.click(span); expect(span.textContent).toBe('Wellcome Alice'); expect(onClickSpy).toBeCalledWith(username); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、いくつかの理由により、「標準的な方法」ではなく、テストにReact Test Utilitesを使用しません。 まず、このライブラリには非常に貧弱なドキュメントがあり、それに対処するために、初心者はインターネット上の回答の検索を積極的に使用する必要があります。 第二に、私たちにとって最も「おいしい」機能であるコンポーネントの浅いレンダリングは、長い間実験段階にあり、どのような形でも実現していません。 代わりに、Arbnbチームによって開発され、Reactアプリケーションのテストですでに非常に人気のある素晴らしいEnzymeライブラリを使用します。 基本的に、Enzymeは、他の3つのライブラリのアドオンであるライブラリです：React TestUtils、JSDOM、およびCheerIO：

• TestUtils-ReactコンポーネントをテストするためにFacebookによって作成されたライブラリ
• JSDOMは、DOMのJS実装です。 ブラウザをエミュレートできます
• CheerIO-DOM要素を操作するためのJqueryの類似物

すべてを組み合わせて少し追加することにより、Enzymeを使用すると、Reactコンポーネントのテストを簡単かつ明確に作成できます。また、Test Utilitesの機能に加えて、次のことも可能です。

• コンポーネントをレンダリングするための3つのオプション：浅い、マウント、およびレンダリング
• JQueryのようなコンポーネント検索構文
• コンポーネント名を使用してコンポーネントを検索します（DisplayNameパラメーターでこの名前を指定した場合のみ）
• パラメーター値（props）を使用してコンポーネントを検索します

はい、EnzymeにはTestRunnerが含まれておらず、コンポーネントの「スタブ」の作成方法もわかりませんが、これにはすでにJestがあります。



コンポーネントをレンダリングするための3つのオプションと、それが提供するものを詳しく見てみましょう。 したがって、Enzymeには、コンポーネントをレンダリングし、Jqueryスタイルの一連のメソッドで同様のラッパーを返す3つのメソッドがあります。

• 浅いレンダリング-酵素はコンポーネント自体のみをレンダリングし、それに埋め込まれたコンポーネントのレンダリングを無視します
• 完全なDomレンダリング-コンポーネントとそのすべての埋め込みコンポーネントの完全なレンダリング
• 静的レンダリング-渡されたコンポーネントの静的HTMLをレンダリングします

Enzymeが提供するすべてのメソッドのリストを提供するわけではありません。

• コンポーネントまたはDOM要素を見つける
• コンポーネントのコンテンツをJSXマークアップと比較する
• コンポーネントのプロパティを確認する
• コンポーネントの状態を更新する
• イベントをエミュレートする

これらは酵素のすべての機能ではありません。 ライブラリのドキュメントで完全なリストを見つけることができます。3種類のレンダリングの違いに焦点を当てます。



浅いレンダリングを可能にするものとその魅力は何ですか？ また、組み込みコンポーネントについて考えるのではなく、コンポーネント自体のみをテストするときに集中する機会を与えてくれます。 組み込みコンポーネントによって生成される構造がどのように変化するかは絶対に気にしません。これはテストを中断するものではありません。 したがって、他のコンポーネントから分離してコンポーネントをテストできます。 しかし、これはネストされたコンポーネントをまったくテストしないという意味ではありません。 いいえ、ネストされたコンポーネントにプロパティを正しく渡すことをテストで確認できます。 さらに、このようなテストのもう1つの利点は、DOMを必要としないため、そのようなテストの速度がFull Domレンダリングを使用する場合よりもはるかに速いことです。 しかし、残念ながら、常に表面レンダリングのみを使用できるわけではありません。 たとえば、使用するWellcomeコンポーネントに加えて、次のコンテンツを持つHomeコンポーネントも用意します。

 import React, { PropTypes, Component } from 'react' import Wellcome from './Wellcome' class Home extends Component { onChangeUsername(e) { this.props.changeUsername(e.target.value); } render() { return ( <section className='home'> <h1>Home</h1> <Wellcome username={this.props.username} /> <input type="text" name="username" value={this.props.username} onChange={this.onChangeUsername.bind(this)} /> </section> ) } } Home.propTypes = { changeUsername: PropTypes.func.isRequired } export default Home
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコンポーネントのテストを作成しましょう。

 import React from 'react' import { shallow } from 'enzyme' import Home from './Home' import Wellcome from './Wellcome'; describe('<Home />', () => { it('should render self and Wellcome', () => { const renderedComponent = shallow( <Home username={'Alice'} changeUsername={jest.fn()} /> ); //    console.log(renderedComponent.debug()); expect(renderedComponent.find('section').hasClass('home')).toBe(true); expect(renderedComponent.find('h1').text()).toBe('Home'); expect(renderedComponent.find('input').length).toBe(1); expect(renderedComponent.find(Wellcome).props().username).toBeDefined(); expect(renderedComponent.contains(<Wellcome username={'Alice'} />)).toBe(true); }); it('should call changeUsername on input changes', () => { const changeUsernameSpy = jest.fn(); const renderedComponent = shallow( <Home username={'Alice'} changeUsername={changeUsernameSpy} ); renderedComponent.find('input').simulate('change', { target: { value: 'Test' } }); expect(changeUsernameSpy).toBeCalledWith('Test'); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Enzymeで浅いレンダリングがどのように機能するかを確認するために、デバッグ機能を使用して、次のコードが表示するものを確認します。

 <section className="home"> <h1> Home </h1> <Wellcome username="Alice" /> <input type="text" name="username" value="Alice" onChange={[Function]} /> </section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、Enzymeはコンポーネントをレンダリングしましたが、埋め込みコンポーネントはレンダリングしませんでした。 それにもかかわらず、彼はそれらの正しいパラメーターを作成し、必要に応じてそれらをチェックできます。



ここで、サーフェスレンダリングが適切ではなく、mountメソッドを呼び出して完全なレンダリングを使用する必要がある場合のオプションを見てみましょう。 次の場合、サーフェスレンダリングは機能しません。

• コンポーネントには、componentWillMountやcomponentDidMountなどのライフサイクルメソッドのロジックが含まれています。 もちろん、手動で呼び出すことはできますが、これが常に良い方法であるかどうかはわかりません。
• コンポーネントはDOMと対話する必要があります。 実際のところ、サーフェスレンダリングはJSDOMを使用せず、DOMとのすべての対話は単に機能しません。
• 複数のコンポーネントが相互に統合されていることを確認する必要があります。たとえば、ToDo作成コンポーネントとToDoリストコンポーネントを1ページで使用します

これらの場合、shallowの代わりにmountを使用する必要があります。残念ながら、DOMとJsdomライブラリをロードする必要があるため、テストが遅くなります。 したがって、完全なレンダリングが必要な場合の例を次に示します。

 import React, { PropTypes, Component } from 'react' import Wellcome from './Wellcome' class Home extends Component { componentWillMount() { this.props.fetchUsername(); } onChangeUsername(e) { this.props.changeUsername(e.target.value); } render() { return ( <section className='home'> <h1>Home</h1> <Wellcome username={this.props.username} /> <input type="text" name="username" value={this.props.username} onChange={this.onChangeUsername.bind(this)} /> </section> ); } } Home.propTypes = { changeUsername: PropTypes.func.isRequired, fetchUsername: PropTypes.func, }; export default Home;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして私たちのテスト：

 import React from 'react' import { mount } from 'enzyme' import Home from './Home' import Wellcome from './Wellcome'; describe('<Home />', () => { it('should fetch username on mount', () => { const fetchUsernameSpy = jest.fn(cb => 'Alie'); const renderedComponent = mount( <Home username={'Alie'} changeUsername={jest.fn()} /> ); //    console.log(renderedComponent.debug()); expect(fetchUsernameSpy).toBeCalled(); }) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デバッグコールから返されたものを見てみましょう。

 <Home username="Alise" changeUsername={[Function]} fetchUsername={[Function]}> <section className="home"> <h1> Home </h1> <Wellcome username="Alie"> <div> <span onClick={[Function]}> Wellcome Alise </span> </div> </Wellcome> <input type="text" name="username" value="Alie" onChange={[Function]} /> </section> </Home>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、完全なレンダリングにより、Enzymeは組み込みコンポーネントもレンダリングし、LifeCycleコンポーネントのすべてのメソッドが開始されました。



Enzymeに備わっている最後のタイプのレンダリングである静的レンダリングについては、検討する必要があります。 Cherioライブラリを使用してコンポーネントをHTML文字列にレンダリングし、shallowメソッドおよびmountメソッドによって指定されたオブジェクトのようなオブジェクトを返します。 このテストは、mount呼び出しをrenderに置き換えるだけで、前のテストとは異なるため、もしあれば自分で書くことができます。



コンポーネントのHTML構造のみを分析する必要があり、テストの速度が重要である場合、このメソッドには1つのアプリケーションしか表示されません。 静的レンダリングを使用すると、テストは完全レンダリングを使用するよりも速く実行されます。 このタイプのレンダリングの他の用途は見つかりませんでした。

休憩

そのため、この記事では、Reactコンポーネントのテスト、テストに使用する新しいユーティリティを「感じた」、テストを作成するための既製の「収穫機」を組み立てました。 このトピックが興味深い場合、次の記事では、redux、redux-saga、react-intl、モーダルウィンドウ、およびテストを複雑にする他の要素を使用する、より複雑なアプリケーションを真剣にテストしようとします。



あなたにとってグリーンテストと100％の合格率