migrate SafeAreaView from Jest to Fantom (#56310)

Summary:
Pull Request resolved: #56310

Migrate `SafeAreaView` from Jest to Fantom.

Note: SafeAreaView falls back to View in non-iOS environments, so `collapsable={false}` is needed to prevent Fantom from optimizing the view away.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D99290669

fbshipit-source-id: 8beaf75c4f8237e8f8955564799fed0bbf50d25a

Author: emily8rown

packages/react-native/Libraries/Components/SafeAreaView/__tests__/SafeAreaView-itest.js

@@ -0,0 +1,38 @@
+/**
+ * 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 '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {SafeAreaView, Text} from 'react-native';
+
+describe('<SafeAreaView>', () => {
+  it('renders with children', () => {
+    const root = Fantom.createRoot();
+
+    Fantom.runTask(() => {
+      root.render(
+        // collapsable={false} is needed to prevent the View (SafeAreaView falls
+        // back to View in non-iOS environments) from being optimized away in
+        // the Fantom output.
+        <SafeAreaView collapsable={false}>
+          <Text>Hello World!</Text>
+        </SafeAreaView>,
+      );
+    });
+
+    expect(root.getRenderedOutput({props: []}).toJSX()).toEqual(
+      <rn-view>
+        <rn-paragraph>Hello World!</rn-paragraph>
+      </rn-view>,
+    );
+  });
+});