I want to say that this was a breakthrough! Thank you so much.

I do want to add that we ended up adding a tiny bit more descriptive mocks so that if something changes in the tests, the snapshots can tell you more about what changed and possibly warn you about any unexpected updates.

import React from "react";
function MyComponent({ children = null, ...passableProps }) {
  return (
    <div
      data-mock="MyComponent MOCK"
      data-props={passableProps}
    >
      {children}
    </div>
  );
}
export default MyComponent;

Basically, all our components look like that.