fix: toBeOnTheScreen() with RNTL v12 (#151)

README.md

@@ -239,6 +239,9 @@ You can check that an already captured element has not been removed from the ele
 
 > **Note**<br/> This matcher requires React Native Testing Library v10.1 or later, as it includes
 > the `screen` object.
+>
+> **Note**<br/> If you're using React Native Testing Library v12 or later, you need to install Jest
+> Native v5.4.2 or later.
 
 #### Examples
 

package.json

@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.18.9",
     "@callstack/eslint-config": "^13.0.1",
     "@relmify/jest-serializer-strip-ansi": "^1.0.2",
-    "@testing-library/react-native": "^11.0.0",
+    "@testing-library/react-native": "^12.0.0-rc.0",
     "@types/jest": "^29.0.1",
     "@types/react": "^18.0.19",
     "@types/react-native": "^0.71.0",
@@ -52,12 +52,12 @@
     "eslint": "^8.21.0",
     "husky": "^8.0.1",
     "jest": "^29.0.1",
-    "metro-react-native-babel-preset": "^0.72.3",
+    "metro-react-native-babel-preset": "0.73.7",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
-    "react": "18.1.0",
-    "react-native": "^0.70.6",
-    "react-test-renderer": "18.1.0",
+    "react": "18.2.0",
+    "react-native": "0.71.3",
+    "react-test-renderer": "18.2.0",
     "semantic-release": "^19.0.3",
     "typescript": "^4.8.3"
   },

src/__tests__/to-be-visible.tsx

@@ -20,7 +20,7 @@ describe('.toBeVisible', () => {
 
   test('handles view with display "none"', () => {
     const { getByTestId } = render(<View testID="test" style={{ display: 'none' }} />);
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
   });
 
   test('handles ancestor view with 0 opacity', () => {
@@ -31,7 +31,7 @@ describe('.toBeVisible', () => {
         </View>
       </View>,
     );
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
   });
 
   test('handles ancestor view with display "none"', () => {
@@ -42,7 +42,7 @@ describe('.toBeVisible', () => {
         </View>
       </View>,
     );
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
   });
 
   test('handles empty modal', () => {
@@ -77,12 +77,12 @@ describe('.toBeVisible', () => {
 
   test('handles not visible modal', () => {
     const { getByTestId } = render(<Modal testID="test" visible={false} />);
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
   });
 
   test('handles inaccessible view (iOS)', () => {
     const { getByTestId, update } = render(<View testID="test" accessibilityElementsHidden />);
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
 
     update(<View testID="test" accessibilityElementsHidden={false} />);
     expect(getByTestId('test')).toBeVisible();
@@ -96,14 +96,14 @@ describe('.toBeVisible', () => {
         </View>
       </View>,
     );
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
   });
 
   test('handles inaccessible view (Android)', () => {
     const { getByTestId, update } = render(
       <View testID="test" importantForAccessibility="no-hide-descendants" />,
     );
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
 
     update(<View testID="test" importantForAccessibility="auto" />);
     expect(getByTestId('test')).toBeVisible();
@@ -117,7 +117,7 @@ describe('.toBeVisible', () => {
         </View>
       </View>,
     );
-    expect(getByTestId('test')).not.toBeVisible();
+    expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
   });
 
   test('handles null elements', () => {

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

@@ -74,7 +74,7 @@ describe('.toHaveTextContent', () => {
   test('can handle multiple levels with no explicit children prop', () => {
     const NoChildren = ({ text }: { text: string }) => <Text>{text}</Text>;
     const answer = 'Answer';
-    const { container } = render(
+    const { root } = render(
       <View>
         <Text>
           {answer}
@@ -86,27 +86,27 @@ describe('.toHaveTextContent', () => {
       </View>,
     );
 
-    expect(container).toHaveTextContent(/^Answer: 42$/);
+    expect(root).toHaveTextContent(/^Answer: 42$/);
   });
 
   test('throws when no match is found', () => {
-    const { container } = render(<Text>Should succeed</Text>);
+    const { root } = render(<Text>Should succeed</Text>);
 
     expect(() => {
-      expect(container).toHaveTextContent('Should fail');
+      expect(root).toHaveTextContent('Should fail');
     }).toThrow();
   });
 
   test('does not throw error with empty content', () => {
-    const { container } = render(<Text />);
-    expect(container).toHaveTextContent('');
+    const { root } = render(<Text />);
+    expect(root).toHaveTextContent('');
   });
 
   test('is case-sensitive', () => {
-    const { container } = render(<Text>Sensitive text</Text>);
+    const { root } = render(<Text>Sensitive text</Text>);
 
-    expect(container).toHaveTextContent('Sensitive text');
-    expect(container).not.toHaveTextContent('sensitive text');
+    expect(root).toHaveTextContent('Sensitive text');
+    expect(root).not.toHaveTextContent('sensitive text');
   });
 
   test('can handle conditional rendering', () => {
@@ -124,8 +124,8 @@ describe('.toHaveTextContent', () => {
 
   test('can handle text with an interpolated variable', () => {
     const variable = 'variable';
-    const { container } = render(<Text>With a {variable}</Text>);
+    const { root } = render(<Text>With a {variable}</Text>);
 
-    expect(container).toHaveTextContent('With a variable');
+    expect(root).toHaveTextContent('With a variable');
   });
 });

src/to-be-on-the-screen.ts

@@ -7,7 +7,7 @@ export function toBeOnTheScreen(this: jest.MatcherContext, element: ReactTestIns
     checkReactElement(element, toBeOnTheScreen, this);
   }
 
-  const pass = element === null ? false : getScreen().container === getRootElement(element);
+  const pass = element === null ? false : getScreenRoot() === getRootElement(element);
 
   const errorFound = () => {
     return `expected element tree not to contain element but found:\n${printElement(element)}`;
@@ -37,15 +37,15 @@ function getRootElement(element: ReactTestInstance) {
   return root;
 }
 
-function getScreen() {
+function getScreenRoot() {
   try {
     // eslint-disable-next-line import/no-extraneous-dependencies
     const { screen } = require('@testing-library/react-native');
     if (!screen) {
       throw new Error('screen is undefined');
     }
 
-    return screen;
+    return screen.UNSAFE_root ?? screen.container;
   } catch (error) {
     throw new Error(
       'Could not import `screen` object from @testing-library/react-native.\n\n' +