React-native-testing-library: `queryByText` always return null

[chj-damon]

Describe the bug

I set up a new react-native project and install the testing library following the docs. But it seems all the expected behavior does not work as an aspect.

Am I missing something? I have no idea what happened.

Expected behavior

Steps to Reproduce

https://github.com/chj-damon/testDemo

in App.js:

import React from 'react';
import {View, Text} from 'react-native';

export default () => {
  return (
    <View>
      <Text>hello, test</Text>
    </View>
  );
};

in App.test.js:

import React from 'react';
import {render} from '@testing-library/react-native';

import App from './App';

test('render', () => {
  const {debug, queryByText} = render(<App />);

  debug();

  const result = queryByText('hello');
  expect(result).not.toBeNull();
});

Screenshots

Versions

[kieran-osgood]

Your test is searching for a text value that matches exactly 'hello', either adjust the string to be 'Hello World' ( queryByText('Hello World');) or my preference would be to use a case insensitive regex if you want to search for a partial string e.g.

test('should find Hello World', async () => {
  const { getByText } = render(
    <View>
      <Text>Hello World</Text>
    </View>,
  );
  getByText(/hello/i);
});

N.B. (getBy* matchers will fail if it doesn't find a match, so this tends to be a more concise way to search for an element you expect to be there, save queryBy* for when it may not be in the DOM e.g. error messages that conditionally appear)

[chj-damon]

@kieran-osgood thanks for your reply.