feat: add testing-library plugin and configure for test files

- add @testing-library/react-native and eslint-plugin-testing-library as dev dependencies
- configure eslint to use testing-library plugin for test files
- update react-native-builder-bob to latest version
- add react-test-renderer as dev dependency

Author: johelder

eslint.config.mjs

@@ -16,7 +16,14 @@ const compat = new FlatCompat({
 
 export default defineConfig([
   {
-    extends: fixupConfigRules(compat.extends('@react-native', 'prettier')),
+    files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+    extends: fixupConfigRules(
+      compat.extends(
+        '@react-native',
+        'prettier',
+        'plugin:testing-library/react'
+      )
+    ),
     plugins: { prettier },
     rules: {
       'react/react-in-jsx-scope': 'off',
@@ -30,12 +37,10 @@ export default defineConfig([
           useTabs: false,
         },
       ],
+      'testing-library/prefer-screen-queries': 'off',
     },
   },
   {
-    ignores: [
-      'node_modules/',
-      'lib/'
-    ],
+    ignores: ['node_modules/', 'lib/'],
   },
 ]);

package.json

@@ -88,18 +88,21 @@
     "@evilmartians/lefthook": "^1.5.0",
     "@react-native/eslint-config": "^0.78.0",
     "@release-it/conventional-changelog": "^9.0.2",
+    "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
     "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
     "eslint": "^9.22.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-testing-library": "^7.2.2",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "18.3.1",
     "react-native": "0.76.8",
-    "react-native-builder-bob": "^0.39.0",
+    "react-native-builder-bob": "^0.40.11",
+    "react-test-renderer": "18.3.1",
     "release-it": "^17.10.0",
     "typescript": "^5.2.2"
   },
@@ -176,6 +179,6 @@
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
-    "version": "0.49.0"
+    "version": "0.50.3"
   }
 }

src/__tests__/text-input-otp.test.tsx

@@ -0,0 +1,31 @@
+import { fireEvent, render as TLRender } from '@testing-library/react-native';
+import { TextInputOTP, TextInputOTPSlot } from '../components';
+import type { TextInputOTPProps } from '../types';
+
+function render(props?: Partial<TextInputOTPProps>) {
+  return TLRender(
+    <TextInputOTP maxLength={6} {...props}>
+      <TextInputOTPSlot index={0} />
+      <TextInputOTPSlot index={1} />
+      <TextInputOTPSlot index={2} />
+      <TextInputOTPSlot index={3} />
+      <TextInputOTPSlot index={4} />
+      <TextInputOTPSlot index={5} />
+    </TextInputOTP>
+  );
+}
+
+describe('TextInputOTP Component', () => {
+  beforeAll(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should call onFilled with the complete code when all digits are filled', () => {
+    const CODE = '123456';
+    const mockedOnFilled = jest.fn();
+    const view = render({ onFilled: mockedOnFilled });
+    fireEvent.changeText(view.getByTestId('hidden-text-input'), CODE);
+
+    expect(mockedOnFilled).toHaveBeenCalledWith(CODE);
+  });
+});

src/components/text-input-otp-slot.tsx

@@ -3,7 +3,7 @@ import { Pressable, Text, StyleSheet } from 'react-native';
 import { Caret } from './caret';
 import { useTextInputOTP } from '../hooks/use-text-input-otp';
 import { useSlotBorderStyles } from '../hooks/use-slot-border-styles';
-import { SLOT_HEIGHT, SLOT_WIDTH } from '../constants';
+import { DEFAULT_DARK_COLOR, SLOT_HEIGHT, SLOT_WIDTH } from '../constants';
 import type {
   TextInputOTPSlotInternalProps,
   TextInputOTPSlotProps,
@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   slotText: {
-    color: '#030712',
+    color: DEFAULT_DARK_COLOR,
     fontSize: 14,
     fontWeight: 'bold',
   },

src/components/text-input.tsx

@@ -19,6 +19,7 @@ export const TextInput = forwardRef<
 
   return (
     <RNTextInput
+      testID="hidden-text-input"
       ref={inputRef}
       keyboardType="number-pad"
       autoFocus={autoFocus}