How to test react component containing nested component which are connected components using react-test-renderer and jest?

Question

Actually, I am using react-test-render and jest for writing test cases in react-native? I have a component which I need to test and that component contains nested components which are connected component. Below is the code which I have written to test the component:

import React from 'react';
import renderer from 'react-test-renderer';
import sinon from 'sinon';
import { clone } from 'lodash';
import { ProfileImageSelect } from 
'../../../../components/settings/ProfileImageSelect';

const userInfo = {
    first_name: 'test_first_name',
    last_name: 'test_last_name'
};

describe('<ProfileImageSelect />', () => {
    let onClose;
    let onSelect;
    let socialLogins;

    beforeEach(() => {
        socialLogins = {
            facebook: {
                id: '187416164',
                identifier: 'adams_facebook',
                full_name: 'Eric Adams',
                profile_pic: 'profile_pic_facebook.jpeg',
                expired: false
            },
            twitter: {
                full_name: 'Eric Adams',
                id: '187416164',
                identifier: 'adams_ea',
                profile_pic: 'https://pbs.twimg.com/profile_images/707586445427380226/5uETA8fs.jpg',
                expired: false
            },
            linkedin: {
                full_name: 'Eric Adams',
                id: '8vN6Da_RJJ',
                identifier: '[email protected]',
                profile_pic:
                    'https://media.licdn.com/dms/image/C5603AQFfn5Ko5IS1NQ/profile-displayphoto-shrink_100_100/0?e=1549497600&v=beta&t=11m5mirEr_R2gf3OOfh3zHTL3Xe2ImrxcZ7l7ebLDa0',
                expired: false
            }
        };
        onClose = sinon.stub();
        onSelect = sinon.stub();
    });

    it('calls onClose on the props on click of cancel link ', () => {
        const connected = clone(socialLogins, true);
        const testRenderer = renderer.create(
            <ProfileImageSelect
                onSelect={onSelect}
                onClose={onClose}
                socialLogins={connected}
                userInfo={userInfo}
            />
        );
        const root = testRenderer.root;
        root.findByProps({ className: 'cancel' }).props.onPress();
        expect(onClose.called).toEqual(true);
    });
});

But it shows me an error saying :

Invariant Violation: Could not find "store" in either the context or props of "Connect(SocialServiceProfileImage)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(SocialServiceProfileImage)".

I know I can use 'react-test-renderer/shallow' for shallow render but it does not allow me to find any node from the DOM like Enzyme does. Can anyone help me with this?. I do not have enzyme and neither I want to use to react-redux-mock-store.

Answer 1

You can define mock store manually and pass it as a prop to component. Unfortunately, it works only with specified component, if you want to go deeper, you have to use redux-mock-store or write your own context provider.

Answer 2

You can add an additional default export for

ProfileImageSelect (the class) that is not connected, and import it as default:

import  ProfileImageSelect  from 
'../../../../components/settings/ProfileImageSelect';

that way you are running a shallow unit test. Other solutions will require you to provide some sort of store/mock-store since they are integration tests. It is usually not best practice to add code or expose objects just for the sake of tests.