enzyme-debug-example.js

// Consider an app with the following two components
const HeadingComponent = (props) => (
  <Text style={{fontWeight: 'bold'}}>{props.title}</Text>
);

const DebugComponent = () => {
  return (
    <>
      <SafeAreaView>
        <ScrollView>
          <HeadingComponent title='My Debug Component' />
          <Text>Please test me</Text>
          <Button title={'Click this button'} />
          <Text>While you're here, click the button 👆</Text>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

// In an Enzyme test, we might do the following...
const wrapper = shallow(<DebugComponent />);
console.log(wrapper.debug());

// ...and see this output
/* 
<Fragment>
  <ForwardRef(SafeAreaView)>
    <ScrollView>
      <HeadingComponent title="My Debug Component" />
      <Text>
        Please test me
      </Text>
      <Button title="Click this button" />
      <Text>
        While you&#39;re here, click the button 👆
      </Text>
    </ScrollView>
  </ForwardRef(SafeAreaView)>
</Fragment> 
*/