Question.test..tsx

import React from 'react';
import {fireEvent, render} from '@testing-library/react-native';
import * as eva from '@eva-design/eva';
import {ApplicationProvider} from '@ui-kitten/components';
import {IQuestion} from '../types';
import {Question} from '../Question';

describe('<Question />', () => {
  const questionProp: IQuestion = {
    id: '123-ABC',
    text: 'What is 2 + 2?',
    answers: ['1', '4', '16', '24'],
    correctAnswer: 1,
  };

  const onSubmitProp = jest.fn();

  let debug: any, getAllByText: any, getByText: any;

  beforeEach(() => {
    ({debug, getAllByText, getByText} = render(
      <ApplicationProvider {...eva} theme={eva.light}>
        <Question question={questionProp} onSubmit={onSubmitProp} />
      </ApplicationProvider>,
    ));
  });

  it('should render question text', () => {
    const questionText = getAllByText('What is 2 + 2?');
    expect(questionText).toHaveLength(1);
  });
  
  it('should render 4 radio options', () => {
    getAllByText('1');
    getAllByText('4');
    getAllByText('16');
    getAllByText('24');
  });

  it('should render the "Submit" button', () => {
    getAllByText('Submit');
  });

  it('should render an "incorrect" banner after user submits the wrong answer"', () => {
    const incorrectAnswerRadio = getByText('16');
    fireEvent(incorrectAnswerRadio, 'onPress');

    const submitButton = getByText('Submit');
    fireEvent(submitButton, 'onPress');

    getAllByText('Incorrect 😞');
  });
  
  it('should render a "correct" banner after user submits the right answer"', () => {
    const correctAnswerRadio = getByText('4');
    fireEvent(correctAnswerRadio, 'onPress');

    const submitButton = getByText('Submit');
    fireEvent(submitButton, 'onPress');

    getAllByText('Correct 🥳');
  });
});