Add `data-testid="xxx"` to Ionic React Project

Ionic Framework
1

Does anyone know how to add a data-testid="home" tag to an Ionic v4 React page that has this general structure?

<>
      <IonHeader>
          ...
      </IonHeader>
      <IonContent>
         ...
      </IonContent>
</>

All page views are wrapped in a React fragment <>. You can’t add a data-testid to a fragment.

Adding to IonHeader like this <IonHeader data-test="id"> does not actually render with the test id. Nor is it very useful because the WHOLE page needs the test id, not just the header. Ditto with IonContent.

If you replace the React Fragment (<>) with a div, the page does not render at all.

Any ideas?

2

I started to create this post, and then figured out the solution while setting up an example.

The solution is simple to wrap the page in an … IonPage like:

const HomePage: React.FunctionComponent = () => {
  return (
    <>
      <IonPage data-testid="home-page">
        <IonHeader>
          ...
        </IonHeader>
        <IonContent>
          ...
        </IonContent>
      </IonPage>
    </>
  );
};