- Notifications
You must be signed in to change notification settings - Fork 733
create example-react-hooks-useReducer #170
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 5 commits
587d9e1
6ffa9a3
0efd497
bc239ff
7db2443
0266c65
9150dad
909875d
6fd0bd3
ebcab51
77674e8
61eff1a
0cbaf5e
353311e
8d3b36e
b2b4ba5
e8e0ec6
3c643c6
413f8a6
f1f8a78
a8c9fc0
d0dafc0
ca79e52
efa40b0
dd87760
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,86 @@ | ||||||
Basic example showing how to test useReducer hook. | ||||||
| ||||||
| ||||||
The component we are testing which changes some text depending on `stateprop1` value. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Suggested change
| ||||||
| ||||||
```jsx | ||||||
import React, { useReducer } from 'react' | ||||||
| ||||||
| ||||||
const initialState = { | ||||||
stateprop1: false, | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
} | ||||||
| ||||||
const Reducer = (state = initialState, action) => { | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
switch(action.type) { | ||||||
case "SUCCESS": | ||||||
return { | ||||||
...state, | ||||||
stateprop1: true, | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
} | ||||||
case "FAILURE": | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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 :) | ||||||
return { | ||||||
...state, | ||||||
stateprop1: false, | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
} | ||||||
default: | ||||||
console.log(state) | ||||||
} | ||||||
} | ||||||
| ||||||
| ||||||
const TestHookReducer = () => { | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
const [reducerState, dispatch] = useReducer(Reducer, initialState) | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
| ||||||
const dispatchActionSuccess = () => { | ||||||
dispatch({ type: 'SUCCESS' }) | ||||||
} | ||||||
| ||||||
const dispatchActionFailure = () => { | ||||||
dispatch({ type: 'FAILURE' }) | ||||||
} | ||||||
| ||||||
| ||||||
return ( | ||||||
<div> | ||||||
<div> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the wrapper <p> {state.isConfirmed ? 'Confirmed!' : 'Waiting for confirmation...'} </p> (sry I can't provide multiline suggestions 😞) | ||||||
{reducerState.stateprop1 | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
? <p>stateprop1 is true</p> | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
: <p>stateprop1 is false</p>} | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
</div> | ||||||
<button onClick={dispatchActionSuccess}> | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
Dispatch Success | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
</button> | ||||||
</div> | ||||||
) | ||||||
} | ||||||
| ||||||
| ||||||
export default TestHookReducer; | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
``` | ||||||
| ||||||
| ||||||
Finally our tests: We are testing to see if we get the correct output in our JSX based on the reducer state. | ||||||
| ||||||
```js | ||||||
import React from 'react' | ||||||
import ReactDOM from 'react-dom' | ||||||
import TestHookReducer from '../test_hook_reducer.js' | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
import {render, fireEvent, cleanup} from '@testing-library/react' | ||||||
| ||||||
iqbal125 marked this conversation as resolved. Show resolved Hide resolved | ||||||
| ||||||
| ||||||
afterEach(cleanup) | ||||||
| ||||||
| ||||||
it('Reducer changes stateprop1 from false to true', () => { | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
const { container, getByText } = render(<TestHookReducer />); | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
| ||||||
expect(getByText(/stateprop1 is/i).textContent).toBe("stateprop1 is false") | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
| ||||||
fireEvent.click(getByText("Dispatch Success")) | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
| ||||||
expect(getByText(/stateprop1 is/i).textContent).toBe("stateprop1 is true") | ||||||
iqbal125 marked this conversation as resolved. Outdated Show resolved Hide resolved | ||||||
}) | ||||||
| ||||||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.