<p dir="auto">I've just changed a component from <code class="notranslate">class Header extends React.Component</code> to <code class="notranslate">const Header = (props) =&gt; (/*JSX here*/ )</code>.</p>
<p dir="auto">Now one of my tests is failing because it can't find an instance of that component where there should be one. This line of code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Header from '../../header';
//...
let header = TestUtils.findRenderedComponentWithType(myRenderedPage, Header);
//I then need to simulate a click on a button that's inside the header component."><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Header</span> <span class="pl-k">from</span> <span class="pl-s">'../../header'</span><span class="pl-kos">;</span>
<span class="pl-c">//...</span>
<span class="pl-k">let</span> <span class="pl-s1">header</span> <span class="pl-c1">=</span> <span class="pl-v">TestUtils</span><span class="pl-kos">.</span><span class="pl-en">findRenderedComponentWithType</span><span class="pl-kos">(</span><span class="pl-s1">myRenderedPage</span><span class="pl-kos">,</span> <span class="pl-v">Header</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">//I then need to simulate a click on a button that's inside the header component.</span></pre></div>
<p dir="auto">Gives this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: Did not find exactly one match for componentType:function Header(props) {
      return _react2['default'].createElement(
        //component implementation here
      );
    } (found 0)"><pre class="notranslate"><code class="notranslate">Error: Did not find exactly one match for componentType:function Header(props) {
      return _react2['default'].createElement(
        //component implementation here
      );
    } (found 0)
</code></pre></div>
<p dir="auto">I'm <em>guessing</em> it's because the function that I'm importing in my test file (i.e. <code class="notranslate">Header</code>) is not the same one that was used to create the component in my actual code, because each place that imports a function gets its own instance of it. Which means that the types never match according to TestUtils. And before it must have worked because ES6 classes are unique somehow, so you always import the same thing?</p>
<p dir="auto">Is this expected behaviour when using functional components, or is there something I'm missing?</p>
<p dir="auto">I originally left a comment in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="107717775" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/4936" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/4936/hovercard" href="https://github.com/facebook/react/issues/4936">#4936</a>, but I felt this might be better as a separate issue.</p>
<blockquote>
<p dir="auto">I completely agree with the rationale behind no backing instances and no refs for stateless components. I want to use pure stateless components as much as possible.</p>
<p dir="auto">However, I'm running into instances where testing stateless components gets tricky. For the most part, using the shallow renderer to render a stateless component has been fine. I can then make assertions on expected props and children. To reduce the duplication, I abstract out the shallow renderer process to a helper function.</p>
<p dir="auto">When, I want to test events, though, I have to take a different route. If my component takes an <code class="notranslate">onClick</code> prop, then I wrap it in a class component, so I can access the DOM node to simulate my click event. Again, this isn't a huge deal because I can abstract out the wrap/render process into a helper function.</p>
<p dir="auto">I bring all this up because I feel that it would be nice to have better facilities in <code class="notranslate">TestUtils</code> for stateless components. I don't think the answer is allowing <code class="notranslate">ReactDOM.findDOMNode</code> to work on stateless components because that opens up it to abuse in normal application code. Are you open to allowing extra functions in <code class="notranslate">TestUtils</code> to simplify the process of testing stateless components? Or am I creating a code smell in my testing?</p>
<p dir="auto">I'd be happy to create a PR for <code class="notranslate">TestUtils</code> if you think some more helper functions for stateless components would be beneficial.</p>
</blockquote>