Geek Answers Handbook

Is there a faster way to reset the layout when testing with Jest?

I write React / Flux code and use Jest to test it. So far it was great, except that my test is already taking a long time.

The culprit seems to drop layouts between each test.

My general setup would look something like this:

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);
  });
});

In my example, if I do not restart the repository between the two tests, I get the wrong result for the number of calls getDoobles, which makes sense, since it will be the same object.

But reloading the layout takes a little time, and if I do a lot of tests, they turn out to be slow.

reset. reset (mockClear()), reset . , , , React, .

. , . WidgetStore, , , , , Widget.

WidgetStore Widget, , , -, React . React .

?

+4
1

React TestUtils () jest.dontMock('response'). 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);
  });
});
+5

More articles:


All Articles