PL component for demonstration

healthy.test.js

it("should add a note", async () => {
    const {
        getByTestId,
        getByText
    } = render( < PaymentLink / > );
    fireEvent.press(getByText("+Add"));
    expect(getByTestId("note-title")).toBeTruthy();
    expect(getByTestId("note-description")).toBeTruthy();
});

pl.jsx

const Button = ({ children, onClick }) => (
  <TouchableOpacity style={SOME_STYLES} onPress={onclick}>
    {title}
  </TouchableOpacity>
);

const Section = ({ title, onClick, testID }) => (
  <View style={SOME_STYLES}>
    <Text>{title}</Text>
    <Button testID={testID}>+Add</Button>
  </View>
);

const Note = () => (
  <View style={SOME_STYLES}>
    <TextInput testID="note-title" placeholder="Title" />
    <TextInput testID="note-description" placeholder="Description" />
  </View>
);


export default class PaymentLink extends React.Component {
  state = {
    note: undefined,
  };

  handleNoteAddition = note => {
    this.setState({note: {id: RANDOM_ID, title: '', description: ''}});
  };

  render() {
    return (
      <React.Fragment>
        <AmountInput />
        <TextInput placeholder="Payment Link for?" />
        <Section
          testID="add-note"
          title="Internal Notes"
          onClick={handleNoteAddition}
        />
        {note ? <Note /> : null}
      </React.Fragment>
    );
  }
}

unhealthy.test.js

test('should add a note', () => {
    const wrapper = shallow( < PaymentLink / > );
    wrapper.find('Section').props().onClick();
    expect(wrapper.instance().state).toBe({
        note: {
            id: RANDOM_ID,
            title: "', description:
            ''
        }
    });
    expect(wrapper).toMatchSnapshot();
});