Testing redux store connected React Components using Jest and Enzyme | TDD | REACT | REACT NATIVE

Hello everyone , in this tutorial we are going to learn at how we can test Redux-Connected components using React / React Native

Here is an example of Redux connected component  SlotContainer.js :

import React, { Component } from 'react'
import { SlotContainerStyles } from '../styles/AppStyle'
import Slot from './Slot'
import ControlButton from './ControlButton'
import {connect} from 'react-redux'
import {setUserInteraction,setSlotRunningStatus} from '../../action'
import ResultWindow from './ResultWindow'
class SlotContainer extends Component {
    constructor(props) {
        super(props)
        this.state = {
            startSlot : false,
        }
        this.timer = null
    }
    componentDidMount(){
        this.props.setSlotRunningStatus(false)
        this.props.setUserInteraction(false)
    }
    updateUserInteraction = (flag) => {
    }
    resetSlotMachine = () =>{
    }
    startStopSlot = (flag) =>{
    }
    render() {
        return (
            <div>
                <div style={SlotContainerStyles.container}>
                    <Slot 
                        resetSlotMachine={this.resetSlotMachine}
                        userInteraction={this.state.startSlot} 
                    />
                </div>
                <div style={SlotContainerStyles.itemContainer}>
                    <ControlButton 
                        slotStatus={this.state.startSlot}
                        userInteractionCallback={this.updateUserInteraction} 
                    />
                </div>
                <div style={SlotContainerStyles.itemContainer}>
                    <ResultWindow />
                </div>
            </div>
        )
    }
}

const mapStateToProps = ({ userInteraction,slotRunning }) => ({
    userInteraction,
    slotRunning
});

const mapDispatchToProps = dispatch => ({
    setUserInteraction: (payload) => dispatch(setUserInteraction(payload)),
    setSlotRunningStatus : flag => dispatch(setSlotRunningStatus(flag))
});

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(SlotContainer);

Let's setup enzyme as dev dependency

npm i enzyme enzyme-adapter-react-16 --save-dev

Create a folder under src named __tests__

Under that folder create SlotContainer.test.js file to write the unit test

import React from 'react';
import SlotContainerElement from '../components/slot/SlotContainer';
import Adapter from 'enzyme-adapter-react-16'
import { configure } from 'enzyme'

configure({ adapter: new Adapter() })

describe('Slot container snapshot testing',()=>{
  it('renders app module correctly',()=>{
      expect(SlotContainerElement).toMatchSnapshot();
  });
});

This test will fail as the component is connected with a redux store

We need to install 'redux-mock-store' as dependency and also need to import Provider from 'react-redux' library

import React from 'react';
import SlotContainerElement from '../components/slot/SlotContainer';
import Adapter from 'enzyme-adapter-react-16'
import { configure,shallow } from 'enzyme'
import { Provider } from "react-redux";
import configureMockStore from "redux-mock-store";

const mockStore = configureMockStore();
const store = mockStore({});
const mockCallBack = jest.fn(); 
configure({ adapter: new Adapter() })

const slotContainerElement = shallow((<Provider store={store}><SlotContainerElement /></Provider>));

describe('Slot container snapshot testing',()=>{
  it('renders app module correctly',()=>{
      expect(slotContainerElement).toMatchSnapshot();
  });
});

As you can see the component is wrapped with a Provider component and mock store has been passed in provider component

Now you try npm run test

As you can see the test is passing successfully now