From 6942e4e41709651a5b0ee4093192de4a3537dd75 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 18 Sep 2017 19:47:03 -0700
Subject: [PATCH] Shallow render ActivityIndicator tests

These snapshots should be improved by flattening the React Native style
object.
---
 .../__snapshots__/index-test.js.snap          | 350 ++++++++++++------
 .../ActivityIndicator/__tests__/index-test.js |  16 +-
 2 files changed, 253 insertions(+), 113 deletions(-)

diff --git a/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
index d62d0a89..008e34ed 100644
--- a/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
+++ b/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
@@ -1,18 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
-<div
+<View
+  accessibilityRole="progressbar"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  role="progressbar"
+  style={
+    Array [
+      15,
+      undefined,
+    ]
+  }
 >
-  <div
-    class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-visibility-11j9u27 rn-width-19wmn03"
+  <View
+    style={
+      Array [
+        19,
+        17,
+        18,
+        16,
+      ]
+    }
   >
     <svg
       height="100%"
-      viewbox="0 0 32 32"
+      viewBox="0 0 32 32"
       width="100%"
     >
       <circle
@@ -20,35 +32,58 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;opacity:0.2;"
+        strokeWidth="4"
+        style={
+          Object {
+            "opacity": 0.2,
+            "stroke": "#1976D2",
+          }
+        }
       />
       <circle
         cx="16"
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
+        strokeWidth="4"
+        style={
+          Object {
+            "stroke": "#1976D2",
+            "strokeDasharray": 80,
+            "strokeDashoffset": 60,
+          }
+        }
       />
     </svg>
-  </div>
-</div>
+  </View>
+</View>
 `;
 
 exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
-<div
+<View
+  accessibilityRole="progressbar"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  role="progressbar"
+  style={
+    Array [
+      15,
+      undefined,
+    ]
+  }
 >
-  <div
-    class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
+  <View
+    style={
+      Array [
+        19,
+        17,
+        false,
+        false,
+      ]
+    }
   >
     <svg
       height="100%"
-      viewbox="0 0 32 32"
+      viewBox="0 0 32 32"
       width="100%"
     >
       <circle
@@ -56,71 +91,94 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;opacity:0.2;"
+        strokeWidth="4"
+        style={
+          Object {
+            "opacity": 0.2,
+            "stroke": "#1976D2",
+          }
+        }
       />
       <circle
         cx="16"
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
+        strokeWidth="4"
+        style={
+          Object {
+            "stroke": "#1976D2",
+            "strokeDasharray": 80,
+            "strokeDashoffset": 60,
+          }
+        }
       />
     </svg>
-  </div>
-</div>
+  </View>
+</View>
 `;
 
 exports[`components/ActivityIndicator prop "color" 1`] = `
-<div
-  aria-valuemax="1"
-  aria-valuemin="0"
-  class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  role="progressbar"
+<svg
+  height="100%"
+  viewBox="0 0 32 32"
+  width="100%"
 >
-  <div
-    class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
-  >
-    <svg
-      height="100%"
-      viewbox="0 0 32 32"
-      width="100%"
-    >
-      <circle
-        cx="16"
-        cy="16"
-        fill="none"
-        r="14"
-        stroke-width="4"
-        style="stroke:red;opacity:0.2;"
-      />
-      <circle
-        cx="16"
-        cy="16"
-        fill="none"
-        r="14"
-        stroke-width="4"
-        style="stroke:red;stroke-dasharray:80;stroke-dashoffset:60;"
-      />
-    </svg>
-  </div>
-</div>
+  <circle
+    cx="16"
+    cy="16"
+    fill="none"
+    r="14"
+    strokeWidth="4"
+    style={
+      Object {
+        "opacity": 0.2,
+        "stroke": "red",
+      }
+    }
+  />
+  <circle
+    cx="16"
+    cy="16"
+    fill="none"
+    r="14"
+    strokeWidth="4"
+    style={
+      Object {
+        "stroke": "red",
+        "strokeDasharray": 80,
+        "strokeDashoffset": 60,
+      }
+    }
+  />
+</svg>
 `;
 
 exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
-<div
+<View
+  accessibilityRole="progressbar"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  role="progressbar"
+  style={
+    Array [
+      15,
+      undefined,
+    ]
+  }
 >
-  <div
-    class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
+  <View
+    style={
+      Array [
+        19,
+        17,
+        18,
+        false,
+      ]
+    }
   >
     <svg
       height="100%"
-      viewbox="0 0 32 32"
+      viewBox="0 0 32 32"
       width="100%"
     >
       <circle
@@ -128,35 +186,58 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;opacity:0.2;"
+        strokeWidth="4"
+        style={
+          Object {
+            "opacity": 0.2,
+            "stroke": "#1976D2",
+          }
+        }
       />
       <circle
         cx="16"
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
+        strokeWidth="4"
+        style={
+          Object {
+            "stroke": "#1976D2",
+            "strokeDasharray": 80,
+            "strokeDashoffset": 60,
+          }
+        }
       />
     </svg>
-  </div>
-</div>
+  </View>
+</View>
 `;
 
 exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
-<div
+<View
+  accessibilityRole="progressbar"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  role="progressbar"
+  style={
+    Array [
+      15,
+      undefined,
+    ]
+  }
 >
-  <div
-    class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-visibility-11j9u27 rn-width-19wmn03"
+  <View
+    style={
+      Array [
+        19,
+        17,
+        18,
+        16,
+      ]
+    }
   >
     <svg
       height="100%"
-      viewbox="0 0 32 32"
+      viewBox="0 0 32 32"
       width="100%"
     >
       <circle
@@ -164,35 +245,58 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;opacity:0.2;"
+        strokeWidth="4"
+        style={
+          Object {
+            "opacity": 0.2,
+            "stroke": "#1976D2",
+          }
+        }
       />
       <circle
         cx="16"
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
+        strokeWidth="4"
+        style={
+          Object {
+            "stroke": "#1976D2",
+            "strokeDasharray": 80,
+            "strokeDashoffset": 60,
+          }
+        }
       />
     </svg>
-  </div>
-</div>
+  </View>
+</View>
 `;
 
 exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
-<div
+<View
+  accessibilityRole="progressbar"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  role="progressbar"
+  style={
+    Array [
+      15,
+      undefined,
+    ]
+  }
 >
-  <div
-    class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1r8g8re rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-1acpoxo"
+  <View
+    style={
+      Array [
+        20,
+        17,
+        false,
+        false,
+      ]
+    }
   >
     <svg
       height="100%"
-      viewbox="0 0 32 32"
+      viewBox="0 0 32 32"
       width="100%"
     >
       <circle
@@ -200,36 +304,61 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;opacity:0.2;"
+        strokeWidth="4"
+        style={
+          Object {
+            "opacity": 0.2,
+            "stroke": "#1976D2",
+          }
+        }
       />
       <circle
         cx="16"
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
+        strokeWidth="4"
+        style={
+          Object {
+            "stroke": "#1976D2",
+            "strokeDasharray": 80,
+            "strokeDashoffset": 60,
+          }
+        }
       />
     </svg>
-  </div>
-</div>
+  </View>
+</View>
 `;
 
 exports[`components/ActivityIndicator prop "size" is a number 1`] = `
-<div
+<View
+  accessibilityRole="progressbar"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-  role="progressbar"
+  style={
+    Array [
+      15,
+      undefined,
+    ]
+  }
 >
-  <div
-    class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
-    style="height:30px;width:30px;"
+  <View
+    style={
+      Array [
+        Object {
+          "height": 30,
+          "width": 30,
+        },
+        17,
+        false,
+        false,
+      ]
+    }
   >
     <svg
       height="100%"
-      viewbox="0 0 32 32"
+      viewBox="0 0 32 32"
       width="100%"
     >
       <circle
@@ -237,18 +366,29 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;opacity:0.2;"
+        strokeWidth="4"
+        style={
+          Object {
+            "opacity": 0.2,
+            "stroke": "#1976D2",
+          }
+        }
       />
       <circle
         cx="16"
         cy="16"
         fill="none"
         r="14"
-        stroke-width="4"
-        style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
+        strokeWidth="4"
+        style={
+          Object {
+            "stroke": "#1976D2",
+            "strokeDasharray": 80,
+            "strokeDashoffset": 60,
+          }
+        }
       />
     </svg>
-  </div>
-</div>
+  </View>
+</View>
 `;
diff --git a/src/components/ActivityIndicator/__tests__/index-test.js b/src/components/ActivityIndicator/__tests__/index-test.js
index d964d328..7961f00d 100644
--- a/src/components/ActivityIndicator/__tests__/index-test.js
+++ b/src/components/ActivityIndicator/__tests__/index-test.js
@@ -2,46 +2,46 @@
 
 import ActivityIndicator from '..';
 import React from 'react';
-import { render } from 'enzyme';
+import { shallow } from 'enzyme';
 
 describe('components/ActivityIndicator', () => {
   describe('prop "animating"', () => {
     test('is "true"', () => {
-      const component = render(<ActivityIndicator animating={true} />);
+      const component = shallow(<ActivityIndicator animating={true} />);
       expect(component).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const component = render(<ActivityIndicator animating={false} />);
+      const component = shallow(<ActivityIndicator animating={false} />);
       expect(component).toMatchSnapshot();
     });
   });
 
   test('prop "color"', () => {
-    const component = render(<ActivityIndicator color="red" />);
+    const component = shallow(<ActivityIndicator color="red" />).find('svg');
     expect(component).toMatchSnapshot();
   });
 
   describe('prop "hidesWhenStopped"', () => {
     test('is "true"', () => {
-      const component = render(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
+      const component = shallow(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
       expect(component).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const component = render(<ActivityIndicator animating={false} hidesWhenStopped={false} />);
+      const component = shallow(<ActivityIndicator animating={false} hidesWhenStopped={false} />);
       expect(component).toMatchSnapshot();
     });
   });
 
   describe('prop "size"', () => {
     test('is "large"', () => {
-      const component = render(<ActivityIndicator size="large" />);
+      const component = shallow(<ActivityIndicator size="large" />);
       expect(component).toMatchSnapshot();
     });
 
     test('is a number', () => {
-      const component = render(<ActivityIndicator size={30} />);
+      const component = shallow(<ActivityIndicator size={30} />);
       expect(component).toMatchSnapshot();
     });
   });