feat: add SafeAreaView to mocks

Author: bcarroll22

src/__tests__/render.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View } from 'react-native';
+import { SafeAreaView, View } from 'react-native';
+
 import { cleanup, toJSON, render } from '../';
 
 afterEach(cleanup);
@@ -15,7 +16,9 @@ test('returns container', () => {
 });
 
 test('renders options.wrapper around node', () => {
-  const WrapperComponent = ({ children }) => <View testID="wrapper">{children}</View>;
+  const WrapperComponent = ({ children }) => (
+    <SafeAreaView testID="wrapper">{children}</SafeAreaView>
+  );
 
   const { container, getByTestId } = render(<View testID="inner" />, {
     wrapper: WrapperComponent,
@@ -26,13 +29,13 @@ test('renders options.wrapper around node', () => {
     <View
       testID="ntl-container"
     >
-      <View
+      <SafeAreaView
         testID="wrapper"
       >
         <View
           testID="inner"
         />
-      </View>
+      </SafeAreaView>
     </View>
   `);
 });

src/lib/to-json.js

@@ -24,7 +24,7 @@ function toJSON(node) {
 
     // Hoist children so that only "native elements" are in the output
     if (typeof node.type !== 'string') {
-      return renderedChildren;
+      return renderedChildren.length === 1 ? renderedChildren[0] : renderedChildren;
     }
 
     // Function props get noisy in debug output, so we'll exclude them

src/preset/configure.js

@@ -19,6 +19,7 @@ configureNTL({
     'Modal',
     'Picker',
     'RefreshControl',
+    'SafeAreaView',
     'ScrollView',
     'Switch',
     'Text',