How to test a component using react-redux hooks?

Posted by Jessica Taylor | Updated on February 12, 2020

If you want to test a component using react-redux hooks? I could test a component which uses redux hooks using enzyme mount facility and providing a mocked store to the Provider:

Component

import React from 'react';

import AppRouter from './Router'

import { useDispatch, useSelector } from 'react-redux'

import StartupActions from './Redux/Startup'

import Startup from './Components/Startup'

import './App.css';

// This is the main component, it includes the router which manages

// routing to different views.

// This is also the right place to declare components which should be

// displayed everywhere, i.e. sockets, services,...

function App () {

const dispatch = useDispatch()

const startupComplete = useSelector(state => state.startup.complete)

if (!startupComplete) {

setTimeout(() => dispatch(StartupActions.startup()), 1000)

}

return (

{startupComplete ? <AppRouter /> : <Startup />}

</div>

);

}

export default App;

Test

import React from 'react';

import {Provider} from 'react-redux'

import { mount, shallow } from 'enzyme'

import configureMockStore from 'redux-mock-store'

import thunk from 'redux-thunk';

import App from '../App';

const mockStore = configureMockStore([thunk]);

describe('App', () => {

it('should render a startup component if startup is not complete', () => {

const store = mockStore({

startup: { complete: false }

});

const wrapper = mount(

<App />

</Provider>

)

expect(wrapper.find('Startup').length).toEqual(1)

})

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

How to test a component using react-redux hooks?

Related Questions & Answers

Solved Programs