1.0.1 ā¢ Published 4 years ago
redux-hooks-testing v1.0.1
It provides functionalities to test components using redux hooks without the hassle to mock or use a store
Install
yarn add https://gitlab.com/right-innov/ri_modules/redux-hooks-testing.git
Usage
if you have SomeAwesomeComponent
and you wanna test it, you'll have to wrappe it with
a Provider
and provide store to it. or use redux-mock-store
.
with redux-hooks-testing
, you don't need to do that, just mock your hooks and you'll be ready to go
if you have this Component :
const SomeAwesomeComponent = () => {
/* subscribing to redux store */
const value= useSelector((state) => state.Key);
const dispatch = useDispatch();
/*dispathcing some actions */
dispatch({
type: 'SOME_ACTIONS',
payload: 'some payload'
})
return(
<div>
<Button onClick={()=>dispatch({type:'ACTION_FORM_COMPONENT'})} />
<h1>{value}</h1>
</div>
)
}
You would test | useSelector
| like this :
import {mockUseSelector} from 'redux-hooks-testing'
import SomeAwesomeComponent from './'
describe('SomeAwesomeComponent',()=>{
/* define a change in state*/
const state = {
Key: 'someValue',
}
/* mock useSelector passing it the changing state*/
mockUseSelector(state)
/*render your component choosing any renderer ie:enzyme shallow rederer*/
const wrapper = shallow(<SomeAwesomeComponent>)
/*Expect the change to happen*/
expect(wrapper.find('h1').text).toBe('someValue')
})
You would test | useDispatch
| like this :
import {mockUseDispatch} from 'redux-hooks-testing'
import SomeAwesomeComponent from './'
describe('SomeAwesomeComponent',()=>{
/* mock useDispatch passing it the changing state*/
const mockedDispatch = mockUseDispatch()
/*render your component choosing any renderer ie:enzyme shallow rederer*/
const wrapper = shallow(<SomeAwesomeComponent>)
/*Expect the fired actions*/
expect(mockedDispatch.firedActions()).toEqual([
{
type: 'SOME_ACTIONS',
payload: 'some payload'
}
])
})
Refrence
mockUseDispatch(once::bool)
Mocks useDispatch from react-redux, ----| it takes
once
boolean param to mock Only Once, defaultfalse
----| it returns the following object of functions:{
firedActions(index::Number): `returns and array of fired actions,
where firedactions()[0] is the last fired actions`
mockedFunction(): `return the mocked jest function to be used further`
}
### `mockUseSlector(state::any, once::bool)`
>Mocks useSelector from react-redux <br/>
----| it takes `state` of the redux store <br/>
----| it takes `once` boolean param to mock Only Once, default `false`<br/>
----| it returns a jest function:
## Author
š¤ **Bilal BOUMAAD**
* Email: [bilal.boumaad@cevital.com](mailto:bilal.boumaad@cevital.com)
## š¤ Contributing
Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://gitlab.com/right-innov/ri_modules/redux-hooks-testing/-/issues). <br/>
Write tests for your contribution
### Run tests
```bash
yarn run test
Show your support
Give a āļø if this project helped you!
License
All rights reserved Ā©; 2020 Right Innov.