create example-react-hooks-useReducer

[iqbal125]

simple example to show to to test the useReducer hook component based on guiding principles.

error

[afontcu]

I'd suggest mentioning that the component changes the DOM, since this is the main benefit of using Testing Library tools - focusing on DOM changes and events, rather than component instances.

Suggested change

	The component: changes stateprop1 from false to true which changes some text.
	The component: changes some text depending on `stateprop1` value.

[iqbal125]

@alexkrolick @afontcu made revisions based on feedback let me know what you think.

[iqbal125]

@afontcu made revisions based on feedback let me know what you think! :)

[alexkrolick]

Added some suggestions that make the example component represent a more real-world use case

[iqbal125]

@alexkrolick Great Suggestions!

[afontcu]

Looking great! 🙌 Just added a bunch of whitespace related suggestions, and a couple of proposals. Let me know what you think! :)

[afontcu]

Suggested change

	The component we are testing which changes some text depending on `stateprop1` value.
	The component we are testing, which changes some text depending on `isConfirmed`.

[afontcu]

Suggested change

	isConfirmed: false,
	isConfirmed: false,

[afontcu]

the wrapper <div> feels unnecessary:

<p> {state.isConfirmed ? 'Confirmed!' : 'Waiting for confirmation...'} </p> 

(sry I can't provide multiline suggestions 😞)

[afontcu]

Suggested change

	<button onClick={dispatch({type: 'SUCCESS'})}>
	<button onClick={dispatch({type: 'SUCCESS'})}>

[afontcu]

Suggested change

	const { getByText } = render(<TestHookReducer />)
	const { getByText } = render(<TestHookReducer />)

[afontcu]

Suggested change

	expect(getByText(/waiting/i).textContent).toBeInTheDocument()
	expect(getByText(/waiting/i).textContent).toBeInTheDocument()

[afontcu]

Suggested change

	fireEvent.click(getByText("Confirm"))
	fireEvent.click(getByText("Confirm"))

[afontcu]

Suggested change

	expect(getByText('Confirmed')).toBeInTheDocument()
	expect(getByText('Confirmed')).toBeInTheDocument()

[afontcu]

If the "FAILURE" state isn't being used, I'd remove it from the demo, so code is as focused on the topic as it can be :)

[afontcu]

Suggested change

	Basic example showing how to test useReducer hook.
	Basic example showing how to test `useReducer` hook.

[alexkrolick]

@afontcu I'm going to merge this and apply the formatting locally