feat: add asFragment to the API

Author: bcarroll22

package.json

@@ -65,7 +65,8 @@
     "react-navigation": "^3.5.1",
     "react-redux": "^7.0.3",
     "redux": "^4.0.1",
-    "semantic-release": "^15.13.3"
+    "semantic-release": "^15.13.3",
+    "snapshot-diff": "0.5.1"
   },
   "peerDependencies": {
     "react": "*",

src/__tests__/__snapshots__/misc.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fragments can show diffs 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -6,8 +6,8 @@
+        \\"flex\\": 1,
+      }
+    }
+  >
+    <Button
+-     title=\\"Click to increase: 0\\"
++     title=\\"Click to increase: 1\\"
+    />
+  </View>"
+`;

src/__tests__/__snapshots__/render.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`supports fragments 1`] = `
+<View
+  collapsable={true}
+  pointerEvents="box-none"
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View>
+    <Text>
+      Fragments are pretty cool!
+    </Text>
+  </View>
+</View>
+`;

src/__tests__/misc.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Picker } from 'react-native';
+import { Button, Picker } from 'react-native';
+import { toMatchDiffSnapshot } from 'snapshot-diff';
 
 import { fireEvent, render } from '../';
 
-test('picker works', () => {
+test('<Picker /> works', () => {
   function Wrapper() {
     const [value, setValue] = React.useState('js');
 
@@ -19,3 +20,25 @@ test('picker works', () => {
   fireEvent.valueChange(getByDisplayValue('js'), 'java');
   expect(() => findByDisplayValue('js')).not.toThrow();
 });
+
+test('fragments can show diffs', () => {
+  function TestComponent() {
+    const [count, setCount] = React.useState(0);
+
+    return (
+      <Button onPress={() => setCount(count => count + 1)} title={`Click to increase: ${count}`} />
+    );
+  }
+
+  expect.extend({ toMatchDiffSnapshot });
+
+  const { getByText, asFragment } = render(<TestComponent />);
+  const firstRender = asFragment();
+
+  fireEvent.press(getByText(/Click to increase/));
+
+  // This will snapshot only the difference between the first render, and the
+  // state of the DOM after the click event.
+  // See https://github.com/jest-community/snapshot-diff
+  expect(firstRender).toMatchDiffSnapshot(asFragment());
+});

src/__tests__/render.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { Text, SafeAreaView, View } from 'react-native';
 
-import { render } from '../';
+import { render, toJSON } from '../';
 
 test('renders View', () => {
   const { container } = render(<View />);
@@ -13,6 +13,23 @@ test('returns container', () => {
   expect(container).toBeTruthy();
 });
 
+it('supports fragments', () => {
+  class Test extends React.Component {
+    render() {
+      return (
+        <View>
+          <Text>Fragments are pretty cool!</Text>
+        </View>
+      );
+    }
+  }
+
+  const { asFragment, unmount } = render(<Test />);
+  expect(asFragment()).toMatchSnapshot();
+  unmount();
+  expect(asFragment()).toBeNull();
+});
+
 test('renders options.wrapper around node', () => {
   const WrapperComponent = ({ children }) => (
     <SafeAreaView testID="wrapper">{children}</SafeAreaView>

src/index.js

@@ -3,6 +3,7 @@ import TR from 'react-test-renderer';
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 
 import {
+  toJSON,
   fireEvent as rntlFireEvent,
   getQueriesForElement,
   NativeTestEvent,
@@ -41,6 +42,9 @@ function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
         testRenderer.update(wrapUiIfNeeded(rerenderUi));
       });
     },
+    asFragment: () => {
+      return toJSON(container);
+    },
     ...getQueriesForElement(baseElement, queries),
   };
 }

src/preset/serializer.js

@@ -2,7 +2,7 @@ import { toJSON } from '../lib';
 
 module.exports = {
   test(value) {
-    return value.$$typeof && Symbol.keyFor(value.$$typeof) === 'ntl.element';
+    return value && value.$$typeof && Symbol.keyFor(value.$$typeof) === 'ntl.element';
   },
   print(value, serialize) {
     return serialize(toJSON(value));