React-native-testing-library: getByText No instances found error

[alexakasanjeev]

Ask your Question

I'm writing a simple Button component , which has a prop loading, if loading is send true, Text component is not rendered, in place of it a loader is rendered. I want to test, if I pass loading prop true, the Text component is not rendered but I'm getting No instance found when using getByText

MyButton.js

const MyButton = ({ title, loading, onPress }) => (
    <TouchableOpacity onPress={onPress} accessible accessibilityRole="button">
         {!loading && (<Text>{title}</Text>)}
         {loading && (<ActivityIndicator />)}
    </TouchableOpacity>
);

MyButton.test.js

test('loading state is handled', () => {
    // Setup
    const buttonTitle = 'Press me';
    const { getByText } = render(<MyButton loading={true} title={buttonTitle} onPress={() => {}} />);

    // Exercise
    const textElement = getByText(buttonTitle);

    // Verify
    expect(textElement).toBeUndefined();
  })

But I'm getting No instances found error

[thymikee]

loading is true, so text doesn't render and hence getByText throws an error.

From the docs:

getBy* queries return the first matching node for a query, and throw an error if no elements match or if more than one match is found (use getAllBy instead).

If you want to verify the text is not there, use queryByText

[alexakasanjeev]

Thank you