Component that have a React Fragment do not mount properly

[TheVedhaGuy]

Overview

When testing html elements that were wrapped in a fragment, we got some unexpected results in the tests. We are using createMount and mount from react-testing

Some things we saw:

1. Tests would fail if elements were wrapped in <>. In order to make them pass, we has to make it a div.
2. When doing .html() on a component that's has a fragment. it returned the string of every single element instead of what the DOM looks like.

An example where we saw the first situation failing:

const ChildButton = ({onClick}: {onClick: () => void}) => (
      <button type="button" onClick={onClick}>
        Clicked
      </button>
);

Component that gets mounted:
<>
     <div onClick={spy}>
          <ChildButton onClick={noop} />
    </div>
</>,

 tree.find(ChildButton)!.trigger('onClick'); <- Fails with `Attempted to operate on a mounted tree, but the component is no longer mounted`

Another case where we have seen unexpected output is when we use .html() on a component that is wrapped in a react fragment. Using the example below and say page contained the mounted component, when doing a console.log(page.html()) it will return just the text on the buttons. The message displayed through the log is Submit Save draft instead of the DOM

function Page() {
 return (
     <>
       <button>Submit</button>
       <button>Save draft</button>
     </>
 );
}

Consuming repo

SFN

Area

Area: testing

• Add any relevant Area: <area> labels to this issue

Scope

Package: @shopify/react-testing

• Tag it with the Package: <package_name> label.

Checklist

• Please delete the labels section before submitting your issue
• I have described this issue in a way that is actionable (if possible)

[TheVedhaGuy]