feat: Add wrapper option to render (#173)

* Add wrapper option to render

* Update TS types and call updateWithAct only once

* wrapUiIfNeeded -> wrap

* reindent snapshots

* adjustments

* change name

Author: OzzieOrca

docs/API.md

@@ -15,6 +15,8 @@ Defined as:
 function render(
   component: React.Element<any>,
   options?: {
+    /* A React Component that renders `component` as children */
+    wrapper?: React.ComponentType<any>,
     /* You won't often use this, but it's helpful when testing refs */
     createNodeMock: (element: React.Element<any>) => any,
   }

src/__tests__/render.test.js

@@ -1,7 +1,13 @@
 // @flow
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
-import { View, Text, TextInput, TouchableOpacity } from 'react-native';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  SafeAreaView,
+} from 'react-native';
 import stripAnsi from 'strip-ansi';
 import { render, fireEvent } from '..';
 
@@ -291,3 +297,50 @@ test('debug changing component', () => {
     'bananaFresh button message should now be "fresh"'
   );
 });
+
+test('renders options.wrapper around node', () => {
+  const WrapperComponent = ({ children }) => (
+    <SafeAreaView testID="wrapper">{children}</SafeAreaView>
+  );
+
+  const { toJSON, getByTestId } = render(<View testID="inner" />, {
+    wrapper: WrapperComponent,
+  });
+
+  expect(getByTestId('wrapper')).toBeTruthy();
+  expect(toJSON()).toMatchInlineSnapshot(`
+    <RCTSafeAreaView
+      emulateUnlessSupported={true}
+      testID="wrapper"
+    >
+      <View
+        testID="inner"
+      />
+    </RCTSafeAreaView>
+  `);
+});
+
+test('renders options.wrapper around updated node', () => {
+  const WrapperComponent = ({ children }) => (
+    <SafeAreaView testID="wrapper">{children}</SafeAreaView>
+  );
+
+  const { toJSON, getByTestId, rerender } = render(<View testID="inner" />, {
+    wrapper: WrapperComponent,
+  });
+
+  rerender(<View testID="inner" accessibilityLabel="test" />);
+
+  expect(getByTestId('wrapper')).toBeTruthy();
+  expect(toJSON()).toMatchInlineSnapshot(`
+    <RCTSafeAreaView
+      emulateUnlessSupported={true}
+      testID="wrapper"
+    >
+      <View
+        accessibilityLabel="test"
+        testID="inner"
+      />
+    </RCTSafeAreaView>
+  `);
+});

src/render.js

@@ -9,27 +9,37 @@ import debugShallow from './helpers/debugShallow';
 import debugDeep from './helpers/debugDeep';
 
 type Options = {
+  wrapper?: React.ComponentType<any>,
+  createNodeMock?: (element: React.Element<any>) => any,
+};
+type TestRendererOptions = {
   createNodeMock: (element: React.Element<any>) => any,
 };
 
 /**
  * Renders test component deeply using react-test-renderer and exposes helpers
  * to assert on the output.
  */
-export default function render(
-  component: React.Element<any>,
-  options?: Options
+export default function render<T>(
+  component: React.Element<T>,
+  { wrapper: Wrapper, createNodeMock }: Options = {}
 ) {
-  const renderer = renderWithAct(component, options);
+  const wrap = (innerElement: React.Element<any>) =>
+    Wrapper ? <Wrapper>{innerElement}</Wrapper> : innerElement;
 
+  const renderer = renderWithAct(
+    wrap(component),
+    createNodeMock ? { createNodeMock } : undefined
+  );
+  const update = updateWithAct(renderer, wrap);
   const instance = renderer.root;
 
   return {
     ...getByAPI(instance),
     ...queryByAPI(instance),
     ...a11yAPI(instance),
-    update: updateWithAct(renderer),
-    rerender: updateWithAct(renderer), // alias for `update`
+    update,
+    rerender: update, // alias for `update`
     unmount: renderer.unmount,
     toJSON: renderer.toJSON,
     debug: debug(instance, renderer),
@@ -38,7 +48,7 @@ export default function render(
 
 function renderWithAct(
   component: React.Element<any>,
-  options?: Options
+  options?: TestRendererOptions
 ): ReactTestRenderer {
   let renderer: ReactTestRenderer;
 
@@ -49,10 +59,13 @@ function renderWithAct(
   return ((renderer: any): ReactTestRenderer);
 }
 
-function updateWithAct(renderer: ReactTestRenderer) {
+function updateWithAct(
+  renderer: ReactTestRenderer,
+  wrap: (innerElement: React.Element<any>) => React.Element<any>
+) {
   return function(component: React.Element<any>) {
     act(() => {
-      renderer.update(component);
+      renderer.update(wrap(component));
     });
   };
 }

typings/index.d.ts

@@ -74,7 +74,8 @@ export interface Thenable {
 }
 
 export interface RenderOptions {
-  createNodeMock: (element: React.ReactElement<any>) => any;
+  wrapper?: React.ComponentType<any>;
+  createNodeMock?: (element: React.ReactElement<any>) => any;
 }
 
 export interface RenderAPI extends GetByAPI, QueryByAPI, A11yAPI {