Add more details to the fireEvent api documentation

[danahartweg]

Summary

I personally encountered some confusion with the fireEvent api (via #100), and didn't immediately realize events did not require an aliased to be fired.

This PR adds some documentation to help make that api as clear as possible for new users.

[thymikee]

It may confuse users though that you wrap component in a View. To avoid confusion can we get rid of props inside MyComponent and provide its basic implementation with the testID, placeholder, etc?

[thymikee]

And thanks for adjusting that, because current example wouldn't work if there's no components reacting to that event (as we omit the root on purpose because the handler could not be called unless that's a host component)

[danahartweg]

I'm not entirely sure I understand what you're suggesting. To the best of my knowledge and testing, the below will work just fine (which is basically what the example was before I modified it by wrapping in a View) regardless of the underlying implementation of MyComponent.

import { render, fireEvent } from 'react-native-testing-library;
import { MyComponent } from './MyComponent';

const onEventMock = jest.fn();
const { getByTestId } = render(
  <MyComponent testID="custom" onMyCustomEvent={onEventMock} />
);

fireEvent(getByTestId('custom'), 'myCustomEvent');

Are you suggesting a more in-depth example where a child in the component has an event that (once fired) would call an event (passed as a prop) on its parent?

[thymikee]

Sorry for the confusion, I was thinking about this case (nor really relevant here though):

react-native-testing-library/src/__tests__/fireEvent.test.js

Lines 74 to 85 in 6d4d426

	test('should not bubble event to root element', () => {
	const onPressMock = jest.fn();
	const { getByTestId } = render(
	<TouchableOpacity onPress={onPressMock}>
	<Text testID="test">Content</Text>
	</TouchableOpacity>
	);
	expect(() => fireEvent.press(getByTestId('test'))).toThrowError();
	expect(onPressMock).not.toHaveBeenCalled();
	});
	});

It just seems like extra View wrapper is unnecessary obfuscation of the example you provided, but will run just fine. Mind removing it?

[danahartweg]

@thymikee aaaahhh, I see what you were going for now. Aaaaaanyway, the extra <View /> and now unnecessary import have been removed.