title: How does one access state on a nested React component wrapped by an HOC?
body: <p>I'm using <a href="http://airbnb.io/enzyme/index.html" rel="noreferrer">Enzyme</a>, and we can actually use the <a href="http://airbnb.io/enzyme/docs/api/ReactWrapper/setState.html#example" rel="noreferrer">example</a> component given in the docs as a foundation for my question.</p>
  
  <p>Let's assume this <code>&lt;Foo /&gt;</code> component uses a <code>&lt;Link&gt;</code> component from ReactRouter and thus we need to wrap it in a <code>&lt;MemoryRouter&gt;</code> for testing.</p>
  
  <p>Herein lies the problem.</p>
  
  <pre><code>it('puts the lotion in the basket', () =&gt; {
    const wrapper = mount(
      &lt;MemoryRouter&gt;
        &lt;Foo /&gt;
      &lt;/MemoryRouter&gt;
    )
  
    wrapper.state('name') // this returns null! We are accessing the MemoryRouter's state, which isn't what we want!
    wrapper.find(Foo).state('name') // this breaks! state() can only be called on the root!
  })
  </code></pre>
  
  <p>So, not exactly sure how to access local component state when using <code>&lt;MemoryRouter&gt;</code>.</p>
  
  <p>Perhaps I'm performing an ignorant test? Is trying to get/set component state bad practice in testing? I can't imagine it is, as Enzyme has methods for getting/setting component state.</p>
  
  <p>Just not sure how one is supposed to access the internals of a component wrapped in <code>&lt;MemoryRouter&gt;</code>.</p>
  
  <p>Any help would be greatly appreciated!</p>