queryByText with newline \n doesn't find matching rendered text

[pke]

Describe the bug

New lines, that are rendered in RN as separate Lines, are wrongly normalised during testing.

const { queryByText } = render(<Text>Line 1\nLine 2</Text>)
expect(queryByText("Line 1\nLine 2")).toBeDefined()

Expected behavior

I expect the test to pass.
I have checked the queryByText and it seems it uses the same normaliser (Default) as the findTextByNode so this should actually work.

I know that in HTML whitespace is ignored and normalised by browsers to one space. But in RN it actually matters and is rendered (at least \n whitespace).

The test can be made to pass by this change:

-expect(queryByText("Line 1\nLine 2")).toBeDefined()
+expect(queryByText("Line 1\nLine 2".split("\n").join(" ")).toBeDefined()

which indicates to me, the queryByText does in fact not normalises the input query text correctly.

Versions

npmPackages:
@testing-library/react-native: 9.0.0 => 9.0.0
react: 17.0.2 => 17.0.2
react-native: 0.66.3 => 0.66.3
react-test-renderer: 16.14.0 => 16.14.0

[mdjastrzebski]

It seems that string matcher is not normalised unlike analysed text:

export function matches(
  matcher: TextMatch,
  text: string,
  normalizer: NormalizerFn = getDefaultNormalizer(),
  exact: boolean = true
): boolean {
  if (typeof text !== 'string') {
    return false;
  }

  const normalizedText = normalizer(text);
  if (typeof matcher === 'string') {
    return exact
      ? normalizedText === matcher
      : normalizedText.toLowerCase().includes(matcher.toLowerCase());
  } else {
    return matcher.test(normalizedText);
  }
}

@pke could you submit a PR for this?

[pke]

you mean in this line?

-? normalizedText === matcher
+? normalizedText === normalizer(matcher)

and

-: normalizedText.toLowerCase().includes(matcher.toLowerCase());
+: normalizedText.toLowerCase().includes(normalizer(matcher).toLowerCase());

Sure I will normalize the matcher before comparing it. PR incoming.

[pke]

OK, @mdjastrzebski I have created a fix, but it only fixes this case:

const { getByText, queryByText } = render(<Text>{'Line 1\nLine 2'}</Text>);
expect(getByText('Line 1\nLine 2')).toBeTruthy();
expect(queryByText('Line 1\nLine 2')).not.toBeNull();

when I don't wrap the text in a string, it does not work:

const { getByText, queryByText } = render(<Text>Line 1\nLine 2</Text>);
expect(getByText('Line 1\nLine 2')).toBeTruthy();
expect(queryByText('Line 1\nLine 2')).not.toBeNull();

Unable to find an element with text: Line 1
    Line 2

      477 | test('getByText with newlines', () => {
      478 |   const { getByText, queryByText } = render(<Text>Line 1\nLine 2</Text>);
    > 479 |   expect(getByText('Line 1\nLine 2')).toBeTruthy();
          |          ^
      480 |   expect(queryByText('Line 1\nLine 2')).not.toBeNull();
      481 | });
      482 |

I guess the JSX compiler turns the \n into a normal string of backslash followed by n