questionsBoard.test.tsx

import*asReactfrom'react';
import{Pressable,ScrollView,Text,TextInput,View}from'react-native';

import{render,screen,userEvent}from'..';

typeQuestionsBoardProps={
questions: string[];
onSubmit: (obj: object)=>void;
};

jest.useFakeTimers();

functionQuestionsBoard({ questions, onSubmit }: QuestionsBoardProps){
const[data,setData]=React.useState({});

return(
<ScrollView>
{questions.map((q,index)=>{
return(
<Viewkey={q}>
<Text>{q}</Text>
<TextInput
accessibilityLabel="answer input"
accessibilityHint="input"
onChangeText={(text)=>{
setData((state)=>({
 ...state,
[index+1]: { q,a: text},
}));
}}
/>
</View>
);
})}
<PressableaccessibilityRole={'button'}onPress={()=>onSubmit(data)}>
<Text>Submit</Text>
</Pressable>
</ScrollView>
);
}

test('form submits two answers',async()=>{
constquestions=['q1','q2'];
constonSubmit=jest.fn();

constuser=userEvent.setup();
render(<QuestionsBoardquestions={questions}onSubmit={onSubmit}/>);

constanswerInputs=screen.getAllByLabelText('answer input');
awaituser.type(answerInputs[0],'a1');
awaituser.type(answerInputs[1],'a2');
awaituser.press(screen.getByRole('button',{name: 'Submit'}));

expect(onSubmit).toHaveBeenCalledWith({
'1': {q: 'q1',a: 'a1'},
'2': {q: 'q2',a: 'a2'},
});
});