I just upgraded my project's React version to 13.3 and setProps() is no longer working. I'm using it in this Mocha test and I'm not sure how to rewrite it now. What are my options?

it('reloads search results when props change ', function() {
    var loadResultsSpy = sinon.spy(searchView, 'loadSearchResults');
    var newProps = {searchBy: 'foo', searchTerm: 'bar'};
    searchView.setProps(newProps);
    expect(loadResultsSpy.calledWith(newProps.searchBy, newProps.searchTerm)).toBe(true);
  });

I just upgraded my project's React version to 13.3 and setProps() is no longer working. I'm using it in this Mocha test and I'm not sure how to rewrite it now. What are my options?

it('reloads search results when props change ', function() {
    var loadResultsSpy = sinon.spy(searchView, 'loadSearchResults');
    var newProps = {searchBy: 'foo', searchTerm: 'bar'};
    searchView.setProps(newProps);
    expect(loadResultsSpy.calledWith(newProps.searchBy, newProps.searchTerm)).toBe(true);
  });

• javascript
• reactjs
• mocha.js

1 Answer 1

In the most general case, React remends just re-rending the top-level ponent, which essentially just updates the props if the new render is of the same ponent type. Since TestUtils.renderIntoDocument is simply a shortcut for creating a DOM node and doing a regular render into it, something like this will work (I'm making some assumptions about the setup of your tests):

var searchView, div;

beforeEach(function() {
  var p = <SearchView searchBy="baz" searchTerm="quix" />;
  div = document.createElement('div');
  searchView = React.render(p, div);
});

it('reloads search results when props change', function() {
  var loadResultsSpy = sinon.spy(searchView, 'loadSearchResults');
  var p = <SearchView searchBy="foo" searchTerm="bar" />;
  React.render(p, div);
  expect(loadResultsSpy.calledWith("foo", "bar")).toBe(true);
});