title: Testing href value from a link component while having dynamic props
body: <p>I am looking for a solution in order to still be able to use Link from react-router instead of a when testing href attribute value.
  Indeed, I have some components which change of route according to the context. However, when I am testing the href attribute value, the only thing returned is null.
  However, when I use an a, it returns me the expected value.</p>
  
  <p>Here is an failing test:</p>
  
  <pre><code>import React from 'react';
  import {Link} from 'react-router';
  import TestUtils from 'react-addons-test-utils';
  import expect from 'must';
  
  const LINK_LOCATION = '/my_route';
  
  class TestComponent extends React.Component {
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Link className='link' to={LINK_LOCATION}/&gt;
                  &lt;a className='a' href={LINK_LOCATION}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  describe('Url things', () =&gt; {
      it('should return me the same href value for both link and a node', () =&gt; {
          const test_component = TestUtils.renderIntoDocument(&lt;TestComponent/&gt;);
          const link = TestUtils.findRenderedDOMComponentWithClass(test_component, 'link');
          const a = TestUtils.findRenderedDOMComponentWithClass(test_component, 'a');
          expect(link.getAttribute('href')).to.eql(a.getAttribute('href'));
      });
  });
  </code></pre>
  
  <p>Output: AssertionError: null must be equivalent to "/my_route"</p>
  
  <p><em>knowbody</em> from React-router answered to see how they test Link, but they do not have dynamic context which can change value of the href attribute.</p>
  
  <p>So I have done something like that: </p>
  
  <pre><code>class ComponentWrapper extends React.Component {
      constructor(props) {
          super(props);
          this.state = {};
      }
  
      set_props(props) {
          this.setState({props});
      }
  
      render() {
          if (this.state.props) {
              return &lt;Component {...this.state.props}/&gt;;
          }
          return null;
      }
  }
  </code></pre>
  
  <p>But now, from my component helper: </p>
  
  <pre><code>render_into_document() {
      const full_component_props = {
          location: this.location,
          widget_categories: this.widget_categories
      };
      node = document.createElement('div');
      this.component = render((
          &lt;Router history={createHistory('/')}&gt;
              &lt;Route path='/' component={ComponentWrapper} /&gt;
          &lt;/Router&gt;
      ));
      this.component.set_props(full_component_props);
      return this;
  }
  </code></pre>
  
  <p>I am not able to lay hand on <code>this.component</code> in order to changes props. How could I do that? </p>