title: React Native Testing Library doesn't find text even though its in debug
body: <p>I'm building a React Native application with TypeScript. I'm using <a href="https://github.com/callstack/react-native-testing-library" rel="noreferrer">React Native Testing Library</a> for my component tests.</p>
  
  <p>I have a simple component that renders two clickable icons and a text. It's a counter that can increment and decrement the number.</p>
  
  <pre><code>import React, { PureComponent } from "react";
  import { Text, TouchableOpacity, View } from "react-native";
  import { Button, Icon } from "react-native-elements";
  import { getIconName } from "../../services/core";
  import styles from "./styles";
  
  export interface AmountButtonProps {
    amount: number;
    onDecrement: () =&gt; void;
    onIncrement: () =&gt; void;
    size: "small" | "large";
  }
  
  export class AmountButtons extends PureComponent&lt;AmountButtonProps&gt; {
    render() {
      const { amount, onDecrement, onIncrement, size } = this.props;
      const fontSize = size === "small" ? 14 : 26;
      const minusDisabled = amount &lt;= 1;
      const plusDisabled = amount &gt;= 25;
      return (
        &lt;View style={styles.container}&gt;
          &lt;Icon
            containerStyle={[
              styles[size],
              styles.iconContainer,
              styles.minusIcon,
              minusDisabled &amp;&amp; styles.disabled
            ]}
            onPress={onDecrement}
            type="ionicon"
            name={getIconName("remove")}
            disabled={minusDisabled}
            disabledStyle={[styles.iconDisabled, styles.disabled]}
            size={fontSize}
            component={TouchableOpacity}
          /&gt;
          &lt;View style={[styles[size], styles.amountContainer, styles.iconContainer]}&gt;
            &lt;Text style={{ fontSize }}&gt;{amount}&lt;/Text&gt;
          &lt;/View&gt;
          &lt;Icon
            containerStyle={[
              styles[size],
              styles.iconContainer,
              styles.addIcon,
              plusDisabled &amp;&amp; styles.disabled
            ]}
            onPress={onIncrement}
            type="ionicon"
            name={getIconName("add")}
            disabled={plusDisabled}
            disabledStyle={styles.iconDisabled}
            color="white"
            size={fontSize}
            component={TouchableOpacity}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default AmountButtons;
  </code></pre>
  
  <p>I wanted to write a simple unit test to see if the user can see the amount. Here is what I wrote.</p>
  
  <pre><code>import React from "react";
  import { debug, fireEvent, render } from "react-native-testing-library";
  import { getIconName } from "../../services/core";
  import AmountButtons, { AmountButtonProps } from "./AmountButtons";
  
  const createTestProps = (props?: object): AmountButtonProps =&gt; ({
    amount: 1,
    onDecrement: jest.fn(),
    onIncrement: jest.fn(),
    size: "large",
    ...props
  });
  
  describe("AmountButtons", () =&gt; {
    const props = createTestProps();
    const { getByText, getByProps } = render(&lt;AmountButtons {...props} /&gt;);
  
    it("displays the amount", () =&gt; {
      debug(&lt;AmountButtons {...props} /&gt;);
      expect(getByText(props.amount.toString())).toBeDefined();
    });
  });
  </code></pre>
  
  <p>The problem is this test throws the error:</p>
  
  <pre><code>● AmountButtons › displays the amount
  
      Component not found.
  
        18 |   it("displays the amount", () =&gt; {
        19 |     debug(&lt;AmountButtons {...props} /&gt;);
      &gt; 20 |     expect(getByText(props.amount.toString())).toBeDefined();
           |            ^
        21 |   });
        22 |
        23 |   it("calls onIncrement", () =&gt; {
  
        at Object.it (app/components/AmountButtons/AmountButtons.test.tsx:20:12)
  </code></pre>
  
  <p>Even though in the output of <code>debug</code> I can see the amount being rendered:</p>
  
  <pre><code>...
         }
        &gt;
          &lt;Text
            style={
              Object {
                "fontSize": 26,
              }
            }
          &gt;
            1
          &lt;/Text&gt;
        &lt;/View&gt;
        &lt;Themed.Icon
  ...
  </code></pre>
  
  <p>What is going on here? Why does React Testing Library not see this text? How can I test this?</p>