feat: support more tests

Author: mdjastrzebski

src/__tests__/auto-cleanup.test.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { render } from '..';
+import { configure, render } from '..';
+
+beforeEach(() => {
+  configure({ renderer: 'internal' });
+});
 
 let isMounted = false;
 
@@ -26,14 +30,14 @@ afterEach(() => {
 
 // This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
 // we'll get automatic cleanup between tests.
-test('component is mounted, but not umounted before test ends', () => {
+test('component is mounted, but not unmounted before test ends', () => {
   const fn = jest.fn();
   render(<Test onUnmount={fn} />);
   expect(isMounted).toEqual(true);
   expect(fn).not.toHaveBeenCalled();
 });
 
-test('component is automatically umounted after first test ends', () => {
+test('component is automatically unmounted after first test ends', () => {
   expect(isMounted).toEqual(false);
 });
 

src/__tests__/screen.test.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { View, Text } from 'react-native';
-import { render, screen } from '..';
+import { configure, render, screen } from '..';
+
+beforeEach(() => {
+  configure({ renderer: 'internal' });
+});
 
 test('screen has the same queries as render result', () => {
   const result = render(<Text>Mt. Everest</Text>);

src/helpers/component-tree.ts

@@ -10,7 +10,7 @@ export type HostTestInstance = ReactTestInstance & { type: string };
  * @param element The element to check.
  */
 export function isHostElement(element?: ReactTestInstance | null): element is HostTestInstance {
-  return typeof element?.type === 'string';
+  return typeof element?.type === 'string' && element.type !== 'CONTAINER';
 }
 
 /**

src/helpers/find-all.ts

@@ -35,28 +35,31 @@ export function findAll(
 // Extracted from React Test Renderer
 // src: https://github.com/facebook/react/blob/8e2bde6f2751aa6335f3cef488c05c3ea08e074a/packages/react-test-renderer/src/ReactTestRenderer.js#L402
 function findAllInternal(
-  root: ReactTestInstance,
+  node: ReactTestInstance,
   predicate: (element: ReactTestInstance) => boolean,
   options?: FindAllOptions,
+  indent: string = '',
 ): HostTestInstance[] {
   const results: HostTestInstance[] = [];
 
+  //console.log(`${indent} 🟢 findAllInternal`, node.type, node.props);
+
   // Match descendants first but do not add them to results yet.
   const matchingDescendants: HostTestInstance[] = [];
-  root.children.forEach((child) => {
+  node.children.forEach((child) => {
     if (typeof child === 'string') {
       return;
     }
-    matchingDescendants.push(...findAllInternal(child, predicate, options));
+    matchingDescendants.push(...findAllInternal(child, predicate, options, indent + '  '));
   });
 
   if (
     // When matchDeepestOnly = true: add current element only if no descendants match
     (!options?.matchDeepestOnly || matchingDescendants.length === 0) &&
-    isHostElement(root) &&
-    predicate(root)
+    isHostElement(node) &&
+    predicate(node)
   ) {
-    results.push(root);
+    results.push(node);
   }
 
   // Add matching descendants after element to preserve original tree walk order.

src/matchers/__tests__/extend-expect.test.tsx

@@ -2,7 +2,11 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 // Note: that must point to root of the /src to reliably replicate default import.
-import { render } from '../..';
+import { configure, render } from '../..';
+
+beforeEach(() => {
+  configure({ renderer: 'internal' });
+});
 
 // This is check that RNTL does not extend "expect" by default, until we actually want to expose Jest matchers publically.
 test('does not extend "expect" by default', () => {

src/matchers/__tests__/to-be-busy.test.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { render, screen } from '../..';
+import { configure, render, screen } from '../..';
 import '../extend-expect';
 
-test('toBeBusy() basic case', () => {
+beforeEach(() => {
+  configure({ renderer: 'internal' });
+});
+
+test.only('toBeBusy() basic case', () => {
   render(
     <>
       <View testID="busy" accessibilityState={{ busy: true }} />

src/matchers/__tests__/to-have-display-value.test.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import { TextInput, View } from 'react-native';
-import { render, screen } from '../..';
+import { configure, render, screen } from '../..';
 import '../extend-expect';
 
+beforeEach(() => {
+  configure({ renderer: 'internal' });
+});
+
 test('toHaveDisplayValue() example test', () => {
   render(<TextInput testID="text-input" value="test" />);
 

src/matchers/to-be-busy.tsx

@@ -6,6 +6,9 @@ import { checkHostElement, formatElement } from './utils';
 export function toBeBusy(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeBusy, this);
 
+  console.log('🔴 toBeBusy', element.type, element.props);
+  console.log('🔴 - computeAriaBusy', computeAriaBusy(element));
+
   return {
     pass: computeAriaBusy(element),
     message: () => {

src/queries/__tests__/accessibility-state.test.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { View, Text, Pressable, TouchableOpacity } from 'react-native';
-import { render, screen } from '../..';
+import { configure, render, screen } from '../..';
 
 type ConsoleLogMock = jest.Mock<typeof console.log>;
 
 beforeEach(() => {
+  configure({ renderer: 'internal' });
   jest.spyOn(console, 'warn').mockImplementation(() => {});
 });
 
@@ -148,6 +149,10 @@ describe('disabled state matching', () => {
     render(<View accessibilityState={{ disabled: true }} />);
 
     expect(screen.getByA11yState({ disabled: true })).toBeTruthy();
+    expect(screen.queryByA11yState({ disabled: true })).toBeTruthy();
+
+    const x = screen.queryByA11yState({ disabled: false });
+    expect(x).toMatchInlineSnapshot(`null`);
     expect(screen.queryByA11yState({ disabled: false })).toBeFalsy();
   });
 

src/queries/__tests__/accessibility-value.test.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
-import { render, screen } from '../..';
+import { configure, render, screen } from '../..';
 
 type ConsoleLogMock = jest.Mock<typeof console.log>;
 
 beforeEach(() => {
+  configure({ renderer: 'internal' });
   jest.spyOn(console, 'warn').mockImplementation(() => {});
 });
 
@@ -30,6 +31,64 @@ const Section = () => (
 
 test('getByA11yValue, queryByA11yValue, findByA11yValue', async () => {
   render(<Section />);
+  expect(screen.toJSON()).toMatchInlineSnapshot(`
+    [
+      <Text
+        accessibilityValue={
+          {
+            "max": 60,
+          }
+        }
+      >
+        Title
+      </Text>,
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={false}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
+        <Text
+          accessibilityValue={
+            {
+              "max": 60,
+              "min": 40,
+            }
+          }
+        >
+          cool text
+        </Text>
+      </View>,
+    ]
+  `);
 
   expect(screen.getByA11yValue({ min: 40 }).props.accessibilityValue).toEqual({
     min: 40,