feat: toHaveTextContent() matcher (#1461)

* feat: toHaveTextContent() matcher

chore: fix typescript, remove legacy jest-native tests

* refactor: tweaks

src/helpers/__tests__/getTextContent.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Text } from 'react-native';
 import render from '../../render';
-import { getTextContent } from '../getTextContent';
+import { getTextContent } from '../text-content';
 
 test('getTextContent with simple content', () => {
   const view = render(<Text>Hello world</Text>);

src/helpers/matchers/matchTextContent.ts

@@ -1,6 +1,6 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
-import { getTextContent } from '../getTextContent';
+import { getTextContent } from '../text-content';
 
 /**
  * Matches the given node's text content against string or regex matcher.

src/matchers/__tests__/to-have-text-content.test.tsx

@@ -0,0 +1,84 @@
+/// <reference path="../extend-expect.d.ts" />
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { render, screen } from '../..';
+import '../extend-expect';
+
+test('toHaveTextContent() example test', () => {
+  render(
+    <View testID="view">
+      <Text>Hello</Text> <Text>World</Text>
+    </View>
+  );
+
+  const view = screen.getByTestId('view');
+  expect(view).toHaveTextContent('Hello World');
+  expect(view).not.toHaveTextContent('Hello there');
+});
+
+test('toHaveTextContent() handles positive test cases', () => {
+  render(<Text testID="text">Hello World</Text>);
+
+  const text = screen.getByTestId('text');
+  expect(text).toHaveTextContent('Hello World');
+  expect(text).toHaveTextContent('Hello', { exact: false });
+  expect(text).toHaveTextContent(/Hello World/);
+});
+
+test('toHaveTextContent() does exact match by default', () => {
+  render(<Text testID="text">Hello World</Text>);
+
+  const text = screen.getByTestId('text');
+  expect(text).toHaveTextContent('Hello World');
+  expect(text).not.toHaveTextContent('Hello');
+  expect(text).not.toHaveTextContent('World');
+});
+
+test('toHaveTextContent() handles nested text', () => {
+  render(
+    <Text testID="text">
+      Hello <Text>React</Text>
+    </Text>
+  );
+
+  const text = screen.getByTestId('text');
+  expect(text).toHaveTextContent('Hello React');
+});
+
+test('toHaveTextContent() negative test cases', () => {
+  render(<Text testID="text">Hello World</Text>);
+
+  const text = screen.getByTestId('text');
+  expect(text).not.toHaveTextContent(/Hello React/);
+  expect(() => expect(text).toHaveTextContent(/Hello React/))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveTextContent()
+
+    Expected element to have text content:
+      /Hello React/
+    Received:
+      Hello World"
+  `);
+
+  expect(text).not.toHaveTextContent('Yellow', { exact: false });
+  expect(() => expect(text).toHaveTextContent('Yellow', { exact: false }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveTextContent()
+
+    Expected element to have text content:
+      Yellow
+    Received:
+      Hello World"
+  `);
+});
+
+test('toHaveTextContent() on null element', () => {
+  expect(() => expect(null).toHaveTextContent('Hello World'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).toHaveTextContent()
+
+    received value must be a host element.
+    Received has value: null"
+  `);
+});

src/matchers/extend-expect.d.ts

@@ -1,9 +1,10 @@
-import { TextMatch, TextMatchOptions } from '../matches';
+import type { TextMatch, TextMatchOptions } from '../matches';
 
 export interface JestNativeMatchers<R> {
   toBeOnTheScreen(): R;
   toBeEmptyElement(): R;
   toHaveDisplayValue(expectedValue: TextMatch, options?: TextMatchOptions): R;
+  toHaveTextContent(expectedText: TextMatch, options?: TextMatchOptions): R;
 }
 
 // Implicit Jest global `expect`.

src/matchers/extend-expect.ts

@@ -3,9 +3,11 @@
 import { toBeOnTheScreen } from './to-be-on-the-screen';
 import { toBeEmptyElement } from './to-be-empty-element';
 import { toHaveDisplayValue } from './to-have-display-value';
+import { toHaveTextContent } from './to-have-text-content';
 
 expect.extend({
   toBeOnTheScreen,
   toBeEmptyElement,
   toHaveDisplayValue,
+  toHaveTextContent,
 });

src/matchers/to-have-text-content.tsx

@@ -0,0 +1,35 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { matcherHint } from 'jest-matcher-utils';
+import { getTextContent } from '../helpers/text-content';
+import { TextMatch, TextMatchOptions, matches } from '../matches';
+import { checkHostElement, formatMessage } from './utils';
+
+export function toHaveTextContent(
+  this: jest.MatcherContext,
+  element: ReactTestInstance,
+  expectedText: TextMatch,
+  options?: TextMatchOptions
+) {
+  checkHostElement(element, toHaveTextContent, this);
+
+  const text = getTextContent(element);
+
+  return {
+    pass: matches(expectedText, text, options?.normalizer, options?.exact),
+    message: () => {
+      return [
+        formatMessage(
+          matcherHint(
+            `${this.isNot ? '.not' : ''}.toHaveTextContent`,
+            'element',
+            ''
+          ),
+          `Expected element ${this.isNot ? 'not to' : 'to'} have text content`,
+          expectedText,
+          'Received',
+          text
+        ),
+      ].join('\n');
+    },
+  };
+}