web-dev-qa-db-ja.com

JestでReactコンポーネント関数をテストする

元の

まず第一に、私は Flux アーキテクチャに従っています。

秒数を示すインジケーターがあります。例：30秒。 1秒ごとに1秒ずつ短くなるので、29、28、27まで0になります。0に到達すると、間隔をクリアして繰り返しを停止します。さらに、アクションをトリガーします。このアクションがディスパッチされると、ストアから通知されます。そのため、これが発生したら、間隔を30秒にリセットします。コンポーネントは次のようになります。

var Indicator = React.createClass({

  mixins: [SetIntervalMixin],

  getInitialState: function(){
    return{
      elapsed: this.props.rate
    };
  },

  getDefaultProps: function() {
    return {
      rate: 30
    };
  },

  propTypes: {
    rate: React.PropTypes.number.isRequired
  },

  componentDidMount: function() {
    MyStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    MyStore.removeChangeListener(this._onChange);
  },

  refresh: function(){
    this.setState({elapsed: this.state.elapsed-1})

    if(this.state.elapsed == 0){
      this.clearInterval();
      TriggerAnAction();
    }
  },

  render: function() {
    return (
      <p>{this.state.elapsed}s</p>
    );
  },

  /**
   * Event handler for 'change' events coming from MyStore
   */
  _onChange: function() {
    this.setState({elapsed: this.props.rate}
    this.setInterval(this.refresh, 1000);
  }

});

module.exports = Indicator;

コンポーネントは期待どおりに機能します。それでは、Jestでテストしたいと思います。 renderIntoDocumentを使用できることがわかっているので、30秒のタイムアウトを設定し、component.state.elapsedが0（たとえば）に等しいかどうかを確認できます。

しかし、ここでテストしたいのは異なるものです。リフレッシュ機能が呼び出されるかどうかをテストしたいさらに、経過状態が0の場合、がTriggerAnAction（）をトリガーすることをテストしたいと思います。 OK、私が最初にやろうとしたこと：

jest.dontMock('../Indicator');

describe('Indicator', function() {
  it('waits 1 second foreach tick', function() {

    var React = require('react/addons');
    var Indicator = require('../Indicator.js');
    var TestUtils = React.addons.TestUtils;

    var Indicator = TestUtils.renderIntoDocument(
      <Indicator />
    );

    expect(Indicator.refresh).toBeCalled();

  });
});

しかし、npm testを記述すると、次のエラーが表示されます。

Throws: Error: toBeCalled() should be used on a mock function

ReactTestUtilsから mockComponent 関数を見ましたが、その説明を見て、それが必要なものかどうかわかりません。

わかりました、この時点で、私は立ち往生しています。上記の2つのことをテストする方法について誰かに光を当てることはできますか？

Ianの回答に基づく更新1

それが私が実行しようとしているテストです（いくつかの行のコメントを参照）：

jest.dontMock('../Indicator');

describe('Indicator', function() {
  it('waits 1 second foreach tick', function() {

    var React = require('react/addons');
    var Indicator = require('../Indicator.js');
    var TestUtils = React.addons.TestUtils;

    var refresh = jest.genMockFunction();
    Indicator.refresh = refresh;

    var onChange = jest.genMockFunction();
    Indicator._onChange = onChange;

    onChange(); //Is that the way to call it?

    expect(refresh).toBeCalled(); //Fails
    expect(setInterval.mock.calls.length).toBe(1); //Fails

    // I am trying to execute the 1 second timer till finishes (would be 60 seconds)
    jest.runAllTimers();

    expect(Indicator.state.elapsed).toBe(0); //Fails (I know is wrong but this is the idea)
    expect(clearInterval.mock.calls.length).toBe(1); //Fails (should call this function when time elapsed is 0)

  });
});

私はまだ何かを誤解しています...

javascriptreactjsreactjs-fluxjestjs
32
Ferran Negre

順調に進んでいるようです。この回答で全員が同じページにいることを確認するために、いくつかの用語を邪魔にならないようにしましょう。

Mock：単体テストによって動作が制御される関数。通常、モック関数でオブジェクトの実際の関数をスワップアウトして、モック関数が正しく呼び出されるようにします。 Jestは、モジュールの名前に対してjest.dontMockを呼び出さない限り、モジュールのすべての関数に対してモックを自動的に提供します。

コンポーネントクラス：これはReact.createClassによって返されるものです。これを使用してコンポーネントインスタンスを作成します（それよりも複雑ですが、目的にはこれで十分です）。

コンポーネントインスタンス：コンポーネントクラスの実際にレンダリングされたインスタンス。これは、TestUtils.renderIntoDocumentまたは他の多くのTestUtils関数を呼び出した後に得られるものです。

質問からの更新された例では、モックを生成し、それらをinstanceの代わりにコンポーネントclassにアタッチしています成分。さらに、監視または変更する機能のみをモックアウトする必要があります。たとえば、あなたは_onChangeをモックしますが、あなたはそれを普通に振る舞わせたいので、本当にしたくありません。あなたがモックしたいのはrefreshだけです。

このコンポーネント用に作成した一連のテストの提案を以下に示します。コメントはインラインなので、質問がある場合はコメントを投稿してください。この例とテストスイートの完全な作業用ソースは https://github.com/BinaryMuse/so-jest-react-mock-example/tree/master にあります。クローンを作成して問題なく実行できるはずです。すべての参照モジュールが元の質問に含まれていたわけではないので、コンポーネントに若干の推測と変更を加えなければならなかったことに注意してください。

/** @jsx React.DOM */

jest.dontMock('../indicator');
// any other modules `../indicator` uses that shouldn't
// be mocked should also be passed to `jest.dontMock`

var React, IndicatorComponent, Indicator, TestUtils;

describe('Indicator', function() {
  beforeEach(function() {
    React = require('react/addons');
    TestUtils = React.addons.TestUtils;
    // Notice this is the Indicator *class*...
    IndicatorComponent = require('../indicator.js');
    // ...and this is an Indicator *instance* (rendered into the DOM).
    Indicator = TestUtils.renderIntoDocument(<IndicatorComponent />);
    // Jest will mock the functions on this module automatically for us.
    TriggerAnAction = require('../action');
  });

  it('waits 1 second foreach tick', function() {
    // Replace the `refresh` method on our component instance
    // with a mock that we can use to make sure it was called.
    // The mock function will not actually do anything by default.
    Indicator.refresh = jest.genMockFunction();

    // Manually call the real `_onChange`, which is supposed to set some
    // state and start the interval for `refresh` on a 1000ms interval.
    Indicator._onChange();
    expect(Indicator.state.elapsed).toBe(30);
    expect(setInterval.mock.calls.length).toBe(1);
    expect(setInterval.mock.calls[0][1]).toBe(1000);

    // Now we make sure `refresh` hasn't been called yet.
    expect(Indicator.refresh).not.toBeCalled();
    // However, we do expect it to be called on the next interval tick.
    jest.runOnlyPendingTimers();
    expect(Indicator.refresh).toBeCalled();
  });

  it('decrements elapsed by one each time refresh is called', function() {
    // We've already determined that `refresh` gets called correctly; now
    // let's make sure it does the right thing.
    Indicator._onChange();
    expect(Indicator.state.elapsed).toBe(30);
    Indicator.refresh();
    expect(Indicator.state.elapsed).toBe(29);
    Indicator.refresh();
    expect(Indicator.state.elapsed).toBe(28);
  });

  it('calls TriggerAnAction when elapsed reaches zero', function() {
    Indicator.setState({elapsed: 1});
    Indicator.refresh();
    // We can use `toBeCalled` here because Jest automatically mocks any
    // modules you don't call `dontMock` on.
    expect(TriggerAnAction).toBeCalled();
  });
});
46
Michelle Tilley

私はあなたが何を求めているのか、少なくともその一部を理解していると思います！

エラーから始めて、表示されている理由は、jestにインジケーターモジュールをモックしないように指示しているため、すべての内部は記述したとおりです。特定の関数が呼び出されることをテストする場合は、モック関数を作成し、代わりにそれを使用することをお勧めします...

var React = require('react/addons');
var Indicator = require('../Indicator.js');
var TestUtils = React.addons.TestUtils;

var refresh = jest.genMockFunction();
Indicator.refresh = refresh; // this gives you a mock function to query

次に注意すべきことは、サンプルコードでIndicator変数を実際に再割り当てしているので、適切な動作のために2番目の変数の名前を変更します（以下のように）

var indicatorComp = TestUtils.renderIntoDocument(<Indicator />);

最後に、時間の経過とともに変化するものをテストする場合は、タイマー操作に関するTestUtils機能を使用します（ http://facebook.github.io/jest/docs/timer-mocks.html ）。あなたの場合、私はあなたができると思う：

jest.runAllTimers();

expect(refresh).toBeCalled();

あるいは、おそらく少し面倒ではありませんが、setTimeoutおよびsetIntervalのモック実装に依存してコンポーネントについて推論することです。

expect(setInterval.mock.calls.length).toBe(1);
expect(setInterval.mock.calls[0][1]).toBe(1000);

もう1つ、上記の変更が機能するためには、コンポーネントが最初にストアのモックバージョンで動作するため、変更イベントが発生しないため、onChangeメソッドを手動でトリガーする必要があると思います。また、reactモジュールを無視するようにjestを設定したことを確認する必要があります。そうしないと、モジュールも自動的にモックされます。

完全に提案されたテスト

jest.dontMock('../Indicator');

describe('Indicator', function() {
  it('waits 1 second for each tick', function() {
    var React = require('react/addons');
    var TestUtils = React.addons.TestUtils;

    var Indicator = require('../Indicator.js');
    var refresh = jest.genMockFunction();
    Indicator.refresh = refresh;

    // trigger the store change event somehow

    expect(setInterval.mock.calls.length).toBe(1);
    expect(setInterval.mock.calls[0][1]).toBe(1000);

  });

});
6
Ian Thomas