title: How React Testing Library can assert children props and Redux store updates?
body: <p>I just started exploring a unit testing framework for my react application. I locked my choice at <code>@testing-library/react</code> instead of <code>Enzyme</code> as it is recommended by React and helps writing more robust tests. I'm also planning to use <code>Jest</code> for completeness.</p>
  
  <p>But before I could proceed with <code>React Testing Library</code>, I'm stuck at few questions. Can someone please help?</p>
  
  <p>For instance, </p>
  
  <ol>
  <li>There is an <code>Editor</code> component which updates Redux store based on user input.</li>
  <li>There is another component <code>Preview</code> which reads value directly from store.</li>
  <li>There is a third component <code>Container</code> which contains both of the above components passing some props.</li>
  </ol>
  
  <p>Questions:</p>
  
  <ol>
  <li>How to test if user input in <code>Editor</code> component actually updates store?</li>
  <li>How to test if <code>Preview</code> component can render value reading from store?</li>
  <li>How to test if <code>Container</code> component passes props correctly to its children?</li>
  </ol>
  
  <p><br></p>
  
  <p><strong>Container.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import Editor from './Editor';
  import Preview from './Preview';
  
  const Container = ({editorType}) =&gt; {
    return (
      &lt;div&gt;
        &lt;Editor type={editorType} /&gt;
        &lt;Preview /&gt;
      &lt;/div&gt;
    );
  };
  export default Container;
  </code></pre>
  
  <p><strong>Editor.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  import {setName} from './actions';
  
  const Editor = ({type}) =&gt; {
    const name = useSelector(state =&gt; state.name);
    const dispatch = useDispatch();
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Type: {type}&lt;/h1&gt;
        &lt;input value={name} onChange={evt =&gt; dispatch(setName(evt.target.value))} /&gt;
      &lt;/div&gt;
    );
  };
  export default Editor;
  </code></pre>
  
  <p><strong>Preview.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import { useSelector } from 'react-redux';
  
  const Editor = ({type}) =&gt; {
    const name = useSelector(state =&gt; state.name);
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Name: {name}&lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  export default Preview;
  </code></pre>