title: How to trigger rerender on test component?
body: <p>I am testing this connected component:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class ExclusiveSelectboxesFormSectionView extends React.Component&lt;Props&gt; {
    handleSelection = (field: Field, message: string) =&gt; {
      this.props.setCard({ message, field });
    };
    cancelSelection = () =&gt; this.props.setCard({ message: null, field: null });
  
    render() {
      return (
        &lt;View&gt;
          {this.props.cancelTitle &amp;&amp; (
            &lt;CheckBox
              title={this.props.cancelTitle}
              checked={this.props.card.field == null}
              onPress={this.cancelSelection.bind(this)}
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
            /&gt;
          )}
          {this.props.fields.map((field, i) =&gt; {
            const props = {};
  
            props.isSelected = this.props.card.field == field;
            props.selectionHandler = this.handleSelection.bind(this);
  
            return &lt;ExclusiveFieldView field={field} key={i} {...props} /&gt;;
          })}
        &lt;/View&gt;
      );
    }
  }
  
  const mapState = ({ currentFormReducer }) =&gt; {
    const card = currentFormReducer.card || { message: null, field: null };
    return { card };
  };
  const mapDispatch = { setCard };
  
  export default connect(mapState, mapDispatch)(ExclusiveSelectboxesFormSectionView);
  </code></pre>
  
  <p>I'm trying to test the non-connected component using <code>react-native-testing-library</code>. The component works in the app, but this test is failing to find <code>"Second field option 2"</code> in the next-to-last assertion in the test.</p>
  
  <pre class="lang-js prettyprint-override"><code>// non-connected component
  import { ExclusiveSelectboxesFormSectionView } from "../../src/components/ExclusiveSelectboxesFormSectionView";
  
  function createWrapper(customProps) {
    let mockCard = { message: null, field: null };
    const props = {
      fields,
      setCard: jest.fn().mockImplementation((card: Types.Card) =&gt; {
        mockCard = card;
      }),
      card: mockCard,
      ...customProps
    };
    wrapper = render(
      &lt;Fragment&gt;
        &lt;ExclusiveSelectboxesFormSectionView fields={fields} {...props} /&gt;
      &lt;/Fragment&gt;
    );
    return wrapper;
  }
  
  describe("ExclusiveSelectboxesFormSectionView", () =&gt; {
    let checkboxes;
    beforeEach(() =&gt; {
      wrapper = createWrapper();
      checkboxes = wrapper.getAllByType(CheckBox);
      expect(checkboxes.length).toBe(3);
    });
  
    fit("shows the value of the currently selected field", async () =&gt; {
      await fireEvent.press(checkboxes[1]); // show options
      await fireEvent.press(wrapper.getByText("Second field option 2")); // select option
  
      const component = wrapper.getByType(ExclusiveSelectboxesFormSectionView);
      expect(component.props.setCard).toHaveBeenCalled();
  
      // options should be gone
      expect(wrapper.queryByText("Second field option 1")).toBeNull();
      // selected option should still be on screen
      expect(wrapper.getByText("Second field option 2")).toBeDefined();
      expect(checkboxes[1].props.checked).toBe(true);
    });
  
  });
  </code></pre>
  
  <p>I've passed in a <code>card</code> prop and a <code>setCard</code> mock function prop, in place of redux providing these. </p>
  
  <p>The mock <code>setCard</code> function is being called, so I think the problem is that the component is not rerendering with its new props (and a newly set <code>card</code> prop). A log statement in the component's render function confirms this (it only prints once when the test is run).</p>
  
  <p>I imagine there's something basic I'm missing about how I'm rendering the component, or wrapping it, or calling it, or something.</p>
  
  <p>Can anyone spot my problem?</p>