Testing that an IonRadio component is clicked

Ionic Framework Ionic React
1

I’m currently trying to test a component that requires the user to click on an IonRadio input.

          <IonRadioGroup
            value={selected}
            onIonChange={(e) => setSelected(e.detail.value)}
          >
            <IonItem>
              <IonLabel>Boosted and Auto-Assign first</IonLabel>
              <IonRadio title="normal" slot="start" value="" />
            </IonItem>

            <IonItem>
              <IonLabel>Closest to you</IonLabel>
              <IonRadio title="distance" slot="start" value="Distance" />
            </IonItem>
          </IonRadioGroup>

I followed this official article to set my tests up.

This is my setupTests.ts

import { mockIonicReact } from '@ionic/react-test-utils';

mockIonicReact();

However, no matter what I try my test is failing:

import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { ionFireEvent } from '@ionic/react-test-utils';
import Component from './index';

const setup = async () => {
  const utils = render(
      <Component />
  );

  const normal = await utils.findByTitle('normal');
  const distance = await utils.findByTitle('distance');

  return {
    ...utils,
    normal,
    distance,
  };
};

describe('Shift list sorting', () => {
  it('can select other options', async () => {
    const { distance} = await setup();

    ionFireEvent.click(distance);

    expect(distance).toHaveAttribute('aria-checked', 'true');
  });
});

Results in

image
image1035×487 38.4 KB

How can I test my component? Is the info in the article not relevant anymore?