Fix ActivityIndicator snapshot test, add toMatchShallowSnapshot

Summary:
This diff adds a custom matcher which will wrap a given component and shallow render it, snapshotting the result with the formatting users will see when they do the same.

I also update the ActivityIndicator test to use this new strategy, and add an additional check that the displayName is set.

For context see:
- #21950
- https://github.com/rajivshah3/rn-broken-snapshot/blob/broken-example/__tests__/App.spec.js#L3
- #21937

Reviewed By: TheSavior

Differential Revision: D13326689

fbshipit-source-id: 8ed2302a8aad12962fa2498a46d2502ccfb5c737

Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-test.js

@@ -6,20 +6,49 @@
  *
  * @format
  * @emails oncall+react_native
+ * @flow
  */
 
 'use strict';
 
 const React = require('React');
-const ReactTestRenderer = require('react-test-renderer');
 const ActivityIndicator = require('ActivityIndicator');
+const render = require('../../../../jest/renderer');
 
 describe('ActivityIndicator', () => {
-  it('renders correctly', () => {
-    const instance = ReactTestRenderer.create(
+  it('should set displayName to prevent <Component /> regressions', () => {
+    expect(ActivityIndicator.displayName).toBe('ActivityIndicator');
+  });
+
+  it('should render as <ActivityIndicator> when mocked', () => {
+    const instance = render.create(
+      <ActivityIndicator size="large" color="#0000ff" />,
+    );
+    expect(instance).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ActivityIndicator> when mocked', () => {
+    const output = render.shallow(
       <ActivityIndicator size="large" color="#0000ff" />,
     );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should shallow render as <ForwardRef(ActivityIndicator)> when not mocked', () => {
+    jest.dontMock('ActivityIndicator');
 
-    expect(instance.toJSON()).toMatchSnapshot();
+    const output = render.shallow(
+      <ActivityIndicator size="large" color="#0000ff" />,
+    );
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render as <View> when not mocked', () => {
+    jest.dontMock('ActivityIndicator');
+
+    const instance = render.create(
+      <ActivityIndicator size="large" color="#0000ff" />,
+    );
+    expect(instance).toMatchSnapshot();
   });
 });

Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap

@@ -1,10 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ActivityIndicator renders correctly 1`] = `
+exports[`ActivityIndicator should render as <ActivityIndicator> when mocked 1`] = `
 <ActivityIndicator
   animating={true}
   color="#0000ff"
   hidesWhenStopped={true}
   size="large"
 />
 `;
+
+exports[`ActivityIndicator should render as <View> when not mocked 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
+  }
+>
+  <RCTActivityIndicatorView
+    animating={true}
+    color="#0000ff"
+    hidesWhenStopped={true}
+    indeterminate={true}
+    size="large"
+    style={
+      Object {
+        "height": 36,
+        "width": 36,
+      }
+    }
+    styleAttr="Normal"
+  />
+</View>
+`;
+
+exports[`ActivityIndicator should shallow render as <ActivityIndicator> when mocked 1`] = `
+<ActivityIndicator
+  animating={true}
+  color="#0000ff"
+  hidesWhenStopped={true}
+  size="large"
+/>
+`;
+
+exports[`ActivityIndicator should shallow render as <ForwardRef(ActivityIndicator)> when not mocked 1`] = `
+<ForwardRef(ActivityIndicator)
+  animating={true}
+  color="#0000ff"
+  hidesWhenStopped={true}
+  size="large"
+/>
+`;

jest/renderer.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ * @flow
+ */
+
+'use strict';
+
+const React = require('React');
+
+const TestRenderer = require('react-test-renderer');
+const ShallowRenderer = require('react-test-renderer/shallow');
+
+const renderer = new ShallowRenderer();
+
+export const shallow = (Component: React.Element<any>) => {
+  const Wrapper = (): React.Element<any> => Component;
+
+  return renderer.render(<Wrapper />);
+};
+
+export const create = (Component: React.Element<any>) => {
+  return TestRenderer.create(Component);
+};