RN: Migrate LogBoxInspectorFooter-test.js from Shallow Renderer (#44968)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44968

Migrates this Jest unit test away from using `react-shallow-renderer` because it is no longer recommended.

Changelog:
[Internal]

Reviewed By: robhogan

Differential Revision: D58643066

fbshipit-source-id: 216a036ef8e5cfe9b362c2f367da052ee6c9808b

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -10,21 +10,20 @@
 
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorFooterButton from './LogBoxInspectorFooterButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   onDismiss: () => void,
   onMinimize: () => void,
   level?: ?LogLevel,
-|}>;
+}>;
 
-function LogBoxInspectorFooter(props: Props): React.Node {
+export default function LogBoxInspectorFooter(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
       <View style={styles.root}>
@@ -39,34 +38,12 @@ function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <FooterButton text="Dismiss" onPress={props.onDismiss} />
-      <FooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton text="Dismiss" onPress={props.onDismiss} />
+      <LogBoxInspectorFooterButton text="Minimize" onPress={props.onMinimize} />
     </View>
   );
 }
 
-type ButtonProps = $ReadOnly<{|
-  onPress: () => void,
-  text: string,
-|}>;
-
-function FooterButton(props: ButtonProps): React.Node {
-  return (
-    <SafeAreaView style={styles.button}>
-      <LogBoxButton
-        backgroundColor={{
-          default: 'transparent',
-          pressed: LogBoxStyle.getBackgroundDarkColor(),
-        }}
-        onPress={props.onPress}>
-        <View style={styles.buttonContent}>
-          <Text style={styles.buttonLabel}>{props.text}</Text>
-        </View>
-      </LogBoxButton>
-    </SafeAreaView>
-  );
-}
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -79,17 +56,6 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
   },
-  buttonContent: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  buttonLabel: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',
@@ -102,5 +68,3 @@ const styles = StyleSheet.create({
     color: LogBoxStyle.getTextColor(0.6),
   },
 });
-
-export default LogBoxInspectorFooter;

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type ButtonProps = $ReadOnly<{
+  onPress: () => void,
+  text: string,
+}>;
+
+export default function LogBoxInspectorFooterButton(
+  props: ButtonProps,
+): React.Node {
+  return (
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+  },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+});

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js

@@ -15,9 +15,16 @@ const render = require('../../../../jest/renderer');
 const LogBoxInspectorFooter = require('../LogBoxInspectorFooter').default;
 const React = require('react');
 
+// Mock `LogBoxInspectorFooterButton` because we are interested in snapshotting
+// the behavior of `LogBoxInspectorFooter`, not `LogBoxInspectorFooterButton`.
+jest.mock('../LogBoxInspectorFooterButton', () => ({
+  __esModule: true,
+  default: 'LogBoxInspectorFooterButton',
+}));
+
 describe('LogBoxInspectorFooter', () => {
   it('should render two buttons for warning', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
@@ -29,7 +36,7 @@ describe('LogBoxInspectorFooter', () => {
   });
 
   it('should render two buttons for error', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
@@ -41,7 +48,7 @@ describe('LogBoxInspectorFooter', () => {
   });
 
   it('should render two buttons for fatal', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
@@ -53,7 +60,7 @@ describe('LogBoxInspectorFooter', () => {
   });
 
   it('should render no buttons and a message for syntax error', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap

@@ -60,11 +60,11 @@ exports[`LogBoxInspectorFooter should render two buttons for error 1`] = `
     }
   }
 >
-  <FooterButton
+  <LogBoxInspectorFooterButton
     onPress={[Function]}
     text="Dismiss"
   />
-  <FooterButton
+  <LogBoxInspectorFooterButton
     onPress={[Function]}
     text="Minimize"
   />
@@ -87,11 +87,11 @@ exports[`LogBoxInspectorFooter should render two buttons for fatal 1`] = `
     }
   }
 >
-  <FooterButton
+  <LogBoxInspectorFooterButton
     onPress={[Function]}
     text="Dismiss"
   />
-  <FooterButton
+  <LogBoxInspectorFooterButton
     onPress={[Function]}
     text="Minimize"
   />
@@ -114,11 +114,11 @@ exports[`LogBoxInspectorFooter should render two buttons for warning 1`] = `
     }
   }
 >
-  <FooterButton
+  <LogBoxInspectorFooterButton
     onPress={[Function]}
     text="Dismiss"
   />
-  <FooterButton
+  <LogBoxInspectorFooterButton
     onPress={[Function]}
     text="Minimize"
   />

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -5555,13 +5555,23 @@ declare export default typeof LogBoxInspectorCodeFrame;
 `;
 
 exports[`public API should not change unintentionally Libraries/LogBox/UI/LogBoxInspectorFooter.js 1`] = `
-"type Props = $ReadOnly<{|
+"type Props = $ReadOnly<{
   onDismiss: () => void,
   onMinimize: () => void,
   level?: ?LogLevel,
-|}>;
-declare function LogBoxInspectorFooter(props: Props): React.Node;
-declare export default typeof LogBoxInspectorFooter;
+}>;
+declare export default function LogBoxInspectorFooter(props: Props): React.Node;
+"
+`;
+
+exports[`public API should not change unintentionally Libraries/LogBox/UI/LogBoxInspectorFooterButton.js 1`] = `
+"type ButtonProps = $ReadOnly<{
+  onPress: () => void,
+  text: string,
+}>;
+declare export default function LogBoxInspectorFooterButton(
+  props: ButtonProps
+): React.Node;
 "
 `;