From d1e312d8ce45e29aad26ef02ecdc12d83b18bff2 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@fb.com>
Date: Wed, 5 Dec 2018 17:18:51 -0800
Subject: [PATCH] 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:
- https://github.com/facebook/react-native/pull/21950
- https://github.com/rajivshah3/rn-broken-snapshot/blob/broken-example/__tests__/App.spec.js#L3
- https://github.com/facebook/react-native/issues/21937

Reviewed By: TheSavior

Differential Revision: D13326689

fbshipit-source-id: 8ed2302a8aad12962fa2498a46d2502ccfb5c737
---
 .../__tests__/ActivityIndicator-test.js       | 37 +++++++++++++--
 .../ActivityIndicator-test.js.snap            | 46 ++++++++++++++++++-
 jest/renderer.js                              | 29 ++++++++++++
 3 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 jest/renderer.js

diff --git a/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-test.js b/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-test.js
index 8be9b345bfa..ec97e8255c4 100644
--- a/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-test.js
+++ b/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();
+  });
 
-    expect(instance.toJSON()).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');
+
+    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();
   });
 });
diff --git a/Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap b/Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap
index 8a7181882a7..d8cbec0f264 100644
--- a/Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap
+++ b/Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap
@@ -1,6 +1,6 @@
 // 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"
@@ -8,3 +8,47 @@ exports[`ActivityIndicator renders correctly 1`] = `
   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"
+/>
+`;
diff --git a/jest/renderer.js b/jest/renderer.js
new file mode 100644
index 00000000000..e54d64d867f
--- /dev/null
+++ b/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);
+};