1.0.1 ā€¢ Published 4 years ago

redux-hooks-testing v1.0.1

Weekly downloads
10
License
Commercial
Repository
gitlab
Last release
4 years ago

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, default false ----| 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.

1.0.1

4 years ago

1.0.0

4 years ago