feature: better support for hooks

[Esemesek]

Summary

Make testing hooks easy.

• - render calls are wrapped with act
• - fireEvent calls are wrapped with act
• - re-exported act from react-test-renderer
• - added mock act function to prevent brakeable changes
• - added docs
• - updated typescript definitions
• - added tests

Test plan

Unit tests are included in PR.

Fixes #111

[hyochan]

I was waiting for this! Hope current PR to be merged and released as soon as possible. Thank you for the update @Esemesek.

[Esemesek]

@hyochan I want it to be checked by @thymikee, but he is on vacations right now. It should be merged in a week time C:

[hyochan]

@Esemesek No worry. I can hold that amount of time. Thank you for the detail.

[thymikee]

This is awesome! Would you be so kind and contribute this back to flow-typed?
https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-test-renderer_v16.x.x/test_react-test-renderer-v16.x.x.js

These edits are local-only, so consumers using Flow will start to get errors.

In the meantime I'll merge this, but will wait with the release just a bit

[hyochan]

@thymikee Thanks. Hope I can get notified when this is released.

[thymikee]

It's up in 1.6.0, enjoy :)

[hyochan]

@thymikee @Esemesek I am sorry that I may have to ask this question here. I'd really want to know how to test the useEffect as in react-testing-library like in tutorial. How could I achieve things like rerender in react-native-testing-library?

[thymikee]

@hyochan it just just work now that all renders are wrapped with act – look at the test file:

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

Lines 9 to 29 in b3abf50

	const UseEffect = ({ callback }: { callback: Function }) => {
	React.useEffect(callback);
	return null;
	};
	const Counter = () => {
	const [count, setCount] = React.useState(0);
	return (
	<Text testID="counter" onPress={() => setCount(count + 1)}>
	{count}
	</Text>
	);
	};
	test('render should trigger useEffect', () => {
	const effectCallback = jest.fn();
	render(<UseEffect callback={effectCallback} />);
	expect(effectCallback).toHaveBeenCalledTimes(1);
	});

Apart from that, we don't have rerender, but we have update method that works the same, see: https://reactjs.org/docs/test-renderer.html#testrendererupdate

[hyochan]

@thymikee Thank you so much for your attention! I get it now.