Merge pull request #7 from Liamandrew/feat/support-jest-tests

feat: don't throw error in unit tests

Author: Liamandrew

example/ios/Podfile.lock

@@ -300,7 +300,7 @@ PODS:
   - React-jsinspector (0.68.2)
   - React-logger (0.68.2):
     - glog
-  - react-native-picky (0.2.0):
+  - react-native-picky (0.3.0):
     - React-Core
   - React-perflogger (0.68.2)
   - React-RCTActionSheet (0.68.2):
@@ -554,7 +554,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: b7b553412f2ec768fe6c8f27cd6bafdb9d8719e6
   React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8
   React-logger: a0833912d93b36b791b7a521672d8ee89107aff1
-  react-native-picky: dd01dba35058e3d850723778c2522b881f1345a0
+  react-native-picky: 5177b338d8a2126052975e63b2d5fd9aeb87eec9
   React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6
   React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162
   React-RCTAnimation: bc9440a1c37b06ae9ebbb532d244f607805c6034

package.json

@@ -34,7 +34,9 @@
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "picker",
+    "wheel"
   ],
   "repository": "https://github.com/Liamandrew/react-native-picky",
   "author": "Liam Andrew <[email protected]> (https://github.com/Liamandrew)",
@@ -50,9 +52,12 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
+    "@testing-library/react-native": "^9.1.0",
     "@types/jest": "^26.0.0",
     "@types/react": "^17.0.39",
     "@types/react-native": "0.67.7",
+    "@types/react-test-renderer": "^17.0.1",
+    "babel-jest": "^28.1.1",
     "commitlint": "^11.0.0",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^7.0.0",
@@ -64,6 +69,7 @@
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-builder-bob": "^0.18.2",
+    "react-test-renderer": "^17.0.2",
     "release-it": "^14.2.2",
     "typescript": "^4.4.4"
   },

src/NativePicker.tsx

@@ -1,10 +1,4 @@
-import {
-  requireNativeComponent,
-  UIManager,
-  Platform,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';
 import type {
   NativeColorType,
   NativeOnChange,
@@ -25,6 +19,7 @@ type NativeCommonProps = {
 type NativeIOSProps = {
   style?: StyleProp<ViewStyle>;
   selectedIndexes?: number[];
+  testID?: string;
 };
 
 type NativeAndroidProps = {
@@ -44,14 +39,4 @@ export type NativePickerProps = NativeCommonProps &
   (NativeIOSProps | NativeAndroidProps);
 
 export const NativePicker =
-  UIManager.getViewManagerConfig(ComponentName) != null
-    ? requireNativeComponent<NativePickerProps>(ComponentName)
-    : () => {
-        throw new Error(LINKING_ERROR);
-      };
-
-const LINKING_ERROR =
-  `The package 'react-native-picky' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo managed workflow\n';
+  requireNativeComponent<NativePickerProps>(ComponentName);

src/Picker.tsx

@@ -29,9 +29,9 @@ export interface PickerProps {
   itemSpace?: number;
   textColor?: string;
   textSize?: number;
-  selectedIndex?: number;
   style?: StyleProp<ViewStyle>;
   onChange?: (item: PickerGroupChangeItem) => void;
+  testID?: string;
 }
 
 export const Picker = ({
@@ -47,6 +47,7 @@ export const Picker = ({
   onChange,
   style,
   children,
+  testID,
 }: PickerProps) => {
   const { data, selectedIndexes } = useGroupedNativePicker({
     children,
@@ -76,6 +77,7 @@ export const Picker = ({
         loop={loop}
         onChange={handleOnChange}
         style={[styles.picker, style]}
+        testID={testID}
       />
     );
   }
@@ -103,6 +105,7 @@ export const Picker = ({
               textSize={textSize}
               selectedIndex={selectedIndexes[index]}
               style={styles.picker}
+              testID={testID}
             />
           </View>
         ))}

src/__tests__/Picker.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Picker } from '../Picker';
+import { PickerGroup } from '../PickerGroup';
+import { PickerItem } from '../PickerItem';
+
+describe('<Picker>', () => {
+  describe('selectedIndexes', () => {
+    it('should render correct default selectedIndexes for single group', () => {
+      const { getByTestId } = render(
+        <Picker testID="basic-picker">
+          <PickerGroup>
+            <PickerItem label="A1" value="A1" />
+            <PickerItem label="A2" value="A2" />
+          </PickerGroup>
+        </Picker>
+      );
+
+      const picker = getByTestId('basic-picker');
+
+      expect(picker.props.selectedIndexes).toEqual([0]);
+    });
+
+    it('should render correct selectedIndexes for single group', () => {
+      const { getByTestId } = render(
+        <Picker testID="basic-picker">
+          <PickerGroup selectedValue="A2">
+            <PickerItem label="A1" value="A1" />
+            <PickerItem label="A2" value="A2" />
+          </PickerGroup>
+        </Picker>
+      );
+
+      const picker = getByTestId('basic-picker');
+
+      expect(picker.props.selectedIndexes).toEqual([1]);
+    });
+
+    it('should render correct selectedIndexes for multiple group', () => {
+      const { getByTestId } = render(
+        <Picker testID="basic-picker">
+          <PickerGroup selectedValue="A2">
+            <PickerItem label="A1" value="A1" />
+            <PickerItem label="A2" value="A2" />
+          </PickerGroup>
+          <PickerGroup selectedValue="C3">
+            <PickerItem label="C1" value="C1" />
+            <PickerItem label="C2" value="C2" />
+            <PickerItem label="C3" value="C3" />
+          </PickerGroup>
+        </Picker>
+      );
+
+      const picker = getByTestId('basic-picker');
+
+      expect(picker.props.selectedIndexes).toEqual([1, 2]);
+    });
+  });
+});