React-router: Uniting testing the clicking on a link

Created on 23 Mar 2015 · 4Comments · Source: ReactTraining/react-router

I was trying to test that one page properly has a link to another page and my current helper method was not working. I ended up updating my helper method to this:

testPage: function(initialPath, steps) {
  if (!_.isArray(steps)) {
    steps = [steps];
  };

  var component;
  var routerMainComponent;
  var div = document.createElement('div');
  var routes = require('../web/app/components/core/routes.jsx');
  var location = new TestLocation([initialPath]);

  Router.run(routes, location, function (Handler) {
    var step = steps.shift();

    //this is the confusing part to me
    this.unmountComponent(routerMainComponent);

    routerMainComponent = React.render(React.createFactory(Handler)({}), div);
    step(routerMainComponent);
  }.bind(this));
}

Also some other relative helper methods are:

unmountComponent: function(component) {
  if(component && component.isMounted()) {
    //console.log('unmounted: ' + component.constructor.displayName);
    React.unmountComponentAtNode(component.getDOMNode().parentNode);
  }
},

simulateRouterLinkClick: function(linkComponent) {
  reactTestUtils.Simulate.click(linkComponent, {button: 0});
},

An example test using this code:

it('should have link to desktop page', function(done) {
  var steps = [];

  steps.push(function(mainElement) {
    var link = reactTestUtils.findRenderedDOMComponentWithClass(mainElement, 'header-desktop-link');

    testHelper.simulateRouterLinkClick(link);
  });

  steps.push(function(mainElement) {
    var page = reactTestUtils.scryRenderedDOMComponentsWithClass(mainElement, 'p-desktop');

    expect(page.length).to.equal(1);
    done();
  });

  testHelper.testPage('/prevent-double-click', steps);
});

The confusion I am having is that if I don't do this.unmountComponent(routerMainComponent); in the testPage()'s Router.run(), the test will fail because the routerMainComponent variable will not properly update to the new page that should be loaded from the testHelper.simulateRouterLinkClick(link); in the test.

Do I have to unmount the routerMainComponent each time a Router.Link is clicked in order to get the routerMainComponent to properly update? It just seems weird and I want to make sure that I am not just writing something will never fail (since there is a lack of unit test documentation for react router based components in general, not sure if I am doing this the correct way).

Source