How to test component otp input

[gandarain]

Is your feature request related to a problem? Please describe. Based on the documentation tttstudios/react-native-otp-input on Parameters section. There is not prop for testID. So how to test react native otp input?

Describe the solution you'd like Can you give me an example to test react native otp input?

Describe alternatives you've considered Please let me know, if there is a posibility to test react native otp input component

[fpena]

Hi @gandarain. What do you mean by testID? You mean a provide a value to input the component?

[gandarain]

I see in tttstudios/react-native-otp-input on Parameters section. There is no parameter / props for testID. So how can I test component react native otp input with jest, enzyme, react native testing library or other package for testing?

[SpaghettiC0des]

@gandarain Add this to your __mocks__/@twotalltotems directory (create this if it does not exist)

react-native-otp-input.js

export const ReactComponent = 'OtpInputViewMock';
export default 'OtpInputViewMock';

I prefer to test it by wrapping with a View and adding accessibilityLabel

<View accessible accesibilityLabel="OTP input">
  <OtpInputView pinCount={6} />
</View>

Then on my test (using react-native-testing-library)

describe('VerifyOtpScreen', () => {
    let verifyOtpScreen;

    beforeEach(() => {
       verifyOtpScreen = render(<VerifyOtpScreen />
    });

    it('should show OTP input', () => {
        const actual = verifyOtpScreen.queryByA11yLabel('OTP input');

        expect(actual).not.toBeNull();
    });
});

[Shail-Patel-1]

@gandarain can you please tell me how can you use fireevent.changeText() ?