4

React/Flux コードを書いて、Jest を使ってテストしています。私のテストが完了するのにすでに長い時間がかかっていることを除いて、これまでのところそれは素晴らしいことです.

犯人は、各テストの間にモックをリセットしているようです。

私の一般的なセットアップは次のようになります。

jest.dontMock('react');
jest.dontMock('../Widget.jsx');

describe('Widget', function() {
  var React, TestUtils, Widget, WidgetStore;

  beforeEach(function() {
    React = require('react/addons');
    TestUtils = React.addons.TestUtils;
    WidgetStore = require('../WidgetStore');
    Widget = require('../Widget');
  });

  it('should fetch initial state from the store', function() {
    WidgetStore.getDoobles.mockReturnValueOnce({});

    var widget = TestUtils.renderIntoDocutment(
      <Widget />
    );

    expect(WidgetStore.getDoobles.mock.calls.length).toBe(1);
  });

  it('should refresh its data when clicked', function() {
    WidgetStore.getDoobles.mockReturnValueOnce({});

    var widget = TestUtils.renderIntoDocutment(
      <Widget />
    );

    WidgetStore.getDoobles.mockReturnValueOnce({'foo': 'bar'});        

    TestUtils.Simulate.click(widget);

    expect(WidgetStore.getDoobles.mock.calls.length).toBe(2);
  });
});

私の例では、2 つのテストの間にストアをリロードしないと、 への呼び出し回数に対して間違った結果が得られgetDooblesます。これは、同じオブジェクトであるため意味があります。

しかし、モックのリロードには少し時間がかかり、多くのテストを行うと遅くなります。

オブジェクトのクローンを作成するか、リセット関数を呼び出したいと思います。個々の関数のリセット関数 ( mockClear()) はありますが、オブジェクト全体のグローバル リセットはないようです。また、クローンは React コンポーネントがアクセスしているオブジェクトと同じオブジェクトではないため、オブジェクトのクローンを作成できません。そのため、どの呼び出しも登録されません。

これは他の問題を引き起こします。依存関係チェーンのすべてをリロードする必要があるようです。再要求するだけの場合、アクセスできるオブジェクトは、アクセスできるWidgetStoreオブジェクトと同じではないようですWidget。

リロードWidgetStoreしただけで、React の 2 つのコピーがロードさWidgetれていることが原因と思われるエラーが頻繁に発生します。そのため、毎回 React をリロードする必要があります。

それで、これを行うより良い方法はありますか？

4

1 に答える 1

5

describe() の前に React 変数と TestUtils 変数を設定し、jest.dontMock('react') を使用しません。Widget と WidgetStore の要件も存在する可能性があります。あなたの場合、次のようになります。

jest.dontMock('../Widget.jsx');

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var WidgetStore = require('../WidgetStore');
var Widget = require('../Widget');

describe('Widget', function() {
  var widget;

  beforeEach(function() {
    widget = TestUtils.renderIntoDocument(
      <Widget />
    );
    WidgetStore.getDoobles.mockClear();
  });

  it('should fetch initial state from the store', function() {
    WidgetStore.getDoobles.mockReturnValueOnce({});

    expect(WidgetStore.getDoobles.mock.calls.length).toBe(1);
  });

  it('should refresh its data when clicked', function() {
    WidgetStore.getDoobles.mockReturnValueOnce({});
    WidgetStore.getDoobles.mockReturnValueOnce({'foo': 'bar'});        

    TestUtils.Simulate.click(widget);

    expect(WidgetStore.getDoobles.mock.calls.length).toBe(2);
  });
});
于 2015-02-16T19:27:37.433 に答える