Add js tests

package.json

@@ -27,6 +27,7 @@
     "validate:eslint": "eslint \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\"",
     "validate:typescript": "tsc --project ./ --noEmit",
     "validate:prettier": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" --check",
+    "validate:jest": "jest",
     "prepare": "bob build"
   },
   "keywords": [
@@ -44,19 +45,24 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "@react-native-community/eslint-config": "^0.0.5",
+    "@types/jest": "^24.0.21",
+    "@types/react": "^16.9.11",
     "@types/react-native": "^0.60.22",
+    "@types/react-test-renderer": "^16.9.1",
     "@typescript-eslint/eslint-plugin": "^2.6.0",
     "@typescript-eslint/parser": "^2.6.0",
     "eslint": "6.6.0",
     "eslint-config-prettier": "^6.5.0",
     "eslint-plugin-prettier": "3.1.1",
     "expo": "^35.0.0",
+    "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.57.0",
     "prettier": "^1.18.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-native": "^0.61.0",
     "react-native-web": "^0.11.7",
+    "react-test-renderer": "^16.11.0",
     "typescript": "^3.6.4"
   },
   "repository": {
@@ -64,6 +70,9 @@
     "url": "https://github.com/th3rdwave/react-native-safe-area-context.git"
   },
   "jest": {
+    "preset": "react-native",
+    "testEnvironment": "node",
+    "clearMocks": true,
     "modulePathIgnorePatterns": [
       "<rootDir>/lib/"
     ]

src/__tests__/__snapshots__/index-test.tsx.snap

@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SafeAreaProvider does not render child until inset values are received 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+/>
+`;
+
+exports[`SafeAreaProvider renders 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+/>
+`;
+
+exports[`SafeAreaProvider renders child when inset values are received 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+/>
+`;
+
+exports[`SafeAreaProvider renders child when inset values are received 2`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "bottom": 4,
+        "left": 2,
+        "right": 3,
+        "top": 1,
+      }
+    }
+  />
+</RNCSafeAreaView>
+`;
+
+exports[`SafeAreaProvider supports setting initial insets 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "bottom": 4,
+        "left": 2,
+        "right": 3,
+        "top": 1,
+      }
+    }
+  />
+</RNCSafeAreaView>
+`;
+
+exports[`SafeAreaProvider uses inner insets 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaView
+    onInsetsChange={[Function]}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "bottom": 5,
+          "left": 3,
+          "right": 4,
+          "top": 2,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaView>
+`;
+
+exports[`SafeAreaProvider uses parent insets when available 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaView
+    onInsetsChange={[Function]}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "bottom": 4,
+          "left": 2,
+          "right": 3,
+          "top": 1,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaView>
+`;

src/__tests__/index-test.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import * as ReactTestRenderer from 'react-test-renderer';
+import { View } from 'react-native';
+import { SafeAreaProvider, useSafeArea } from '../index';
+import NativeSafeAreaView from '../NativeSafeAreaView';
+
+const PrintInsetsTestView = () => {
+  const insets = useSafeArea();
+  return (
+    <View
+      style={{
+        top: insets.top,
+        left: insets.left,
+        bottom: insets.bottom,
+        right: insets.right,
+      }}
+    />
+  );
+};
+
+describe('SafeAreaProvider', () => {
+  it('renders', () => {
+    const component = ReactTestRenderer.create(<SafeAreaProvider />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('does not render child until inset values are received', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider>
+        <PrintInsetsTestView />
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders child when inset values are received', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider>
+        <PrintInsetsTestView />
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+    const { onInsetsChange } = component.root.findByType(
+      NativeSafeAreaView,
+    ).props;
+    ReactTestRenderer.act(() => {
+      onInsetsChange({
+        nativeEvent: { insets: { top: 1, left: 2, right: 3, bottom: 4 } },
+      });
+    });
+    expect(component).toMatchSnapshot();
+  });
+
+  it('uses parent insets when available', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider
+        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
+      >
+        <SafeAreaProvider>
+          <PrintInsetsTestView />
+        </SafeAreaProvider>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('uses inner insets', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider
+        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
+      >
+        <SafeAreaProvider
+          initialSafeAreaInsets={{ top: 2, left: 3, right: 4, bottom: 5 }}
+        >
+          <PrintInsetsTestView />
+        </SafeAreaProvider>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('supports setting initial insets', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider
+        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
+      >
+        <PrintInsetsTestView />
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('throws when no provider is rendered', () => {
+    // Silence the React error boundary warning; we expect an uncaught error.
+    const consoleErrorMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(message => {
+        if (message.startsWith('The above error occured in the ')) {
+          return;
+        }
+      });
+    expect(() => {
+      ReactTestRenderer.create(<PrintInsetsTestView />);
+    }).toThrow(
+      'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
+    );
+
+    consoleErrorMock.mockRestore();
+  });
+});