react-nativedetox

React native Detox e2e OTP Testing


Ive implemented a OTP screen in my react-native project and I cant find a way to test it, I have the code for the OPT screen and I can either display the value and then tell detox to copy the text or tell it to use the state through context.

State & context:

but if I add import {useContext} from 'react' and then delcare my context const appContext = useContext(APP_CONTEXT) then use the appContext.OTPCode in my .typeText like so

await element(by.id('appOTPCode')).typeText(appContext.OTPCode);

it gives me a SyntaxError: Cannot use import statement outside a module error on import {useContext} from 'react'

is there a way to tell Detox e2e to accept such imports ?

Display OPT code on screen and copy

I cant find a way to tell detox to copy and paste the code if I display it as plain text on the screen via state.

is there a way to do something like this ?

If any of you have a solution or another way please be kind and share.

Thanks in andvance


Solution

  • Found a solution

      it('it should enter OTP', async () => {
        // get the OTP from the text field
        const otp = await element(by.id('otpText')).getAttributes();
        // enter the OTP into the OTP input field
        await element(by.id('otpText')).tap();
        await element(by.id('otpText')).typeText(otp.text);
      });