How to test with detox?

[oliviayizhang]

Is there a way to do detox test with this library? I have no luck finding the element/type text because the code input component doesn't expose individual input and doesn't support testID too.

[dillonchr]

This might not be your blocker, but for me I just needed to input the code and get to the next screen to keep my test flow going. I just wound up targeting the parent view and sending the keystrokes there. Worked to get me past the screen but it doesn't give you any deep control with the CodeInput itself. Just a stop-gap.

//  component
import React from 'react'
import { View } from 'react-native'
const Screen = () => (
  <View testID={`parent-view-id`}>
    <CodeInput />
  </View>
)

//  spec
describe('component with code input', () => {
  it('should type in code', () => {
    await element(by.id(`parent-view-id`)).typeText('123456')
  })
})

[maxkomarychev]

@dillonchr this approach doesn't work for me. which version of library and detox are you trying?

[dillonchr]

@dillonchr this approach doesn't work for me. which version of library and detox are you trying?

@maxkomarychev we're using detox@^14.3.4 and [email protected] oh and it turns out we're using a branch of [email protected]. https://github.com/marketforces/react-native-confirmation-code-input so maybe in the changes we made to width being able to copy and paste helped us out along the way. Not sure on what would cause the difference.

[retyui]

@oliviayizhang
You can use a fork without this problem
https://github.com/retyui/react-native-confirmation-code-field

[sebastianpaz]

Hey @dillonchr @oliviayizhang
Firstly, set testID={CODE_INPUT} in the code input component (the matcher will return n TextFields, being n your code length.
Then use forEach to write one code character or number in each TextField individually per iteration.

const code = '123456';
const codeSplit = code.split('');
codeSplit.forEach(async (number, index) => {
  await element(by.id(CODE_INPUT)).atIndex(index).typeText(number);
 });
});

[Moustafa-mahmaed]

pass value one to one

 await element(by.id('CodeInput')).atIndex(0).typeText("1");
 await element(by.id('CodeInput')).atIndex(1).typeText("1");
 await element(by.id('CodeInput')).atIndex(2).typeText("1");
 await element(by.id('CodeInput')).atIndex(3).typeText("1");