Connected Component testing with certain prop (React/Redux)

Question

I have a react component with Redux @connect decorator, for instance:

import React, { Component } from 'react'
import { connect } from 'react-redux'

@connect(mapStateToProps, 
{
    onPress: () => {...code}) // Component receives this func, not passed from the test
} 
export class Component extends Component {
    render () {
        return <button onclick={this.props.onPress>....</button> 
    }
}

I faced with a problem that mocked functions passed to the component in a test file are not passed into the component:

const store = createStore(
    combineReducers({name: reducer})
);
const ComponentConnected = connect(..., {
    onPress: {jest.fn()} // Component doesn't receive this mock
})(() =>(<Component />));

describe('Component testing', () => {
    it('should render component', () => {
        const wrapper = mount(
            <Provider store={store}>
                <ComponentConnected />
            </Provider>
        );
        expect(wrapper.find(Component)).toHaveLength(1);
    });
});

Also, I tried to pass the mock function as a tested component prop, it didn't help too. Is it possible to solve this problem without re-writing component @connect decorator?

Evgeny Kuznetsov · Accepted Answer · 2018-08-29 07:26:20Z

2

I found out how to pass a prop to a connected Component. I used shallow, dive and setProps enzyme methods:

describe('Component testing', () => {
    it('should render component', () => {
        const wrapper = shallow(
            <Provider store={store}>
                <ComponentConnected />
            </Provider>
        );
        const connectedComponentWrapper = wrapper.dive().dive();
        connectedComponentWrapper.setProps({anyProp: 'anyProp'});
        });
    });

answered Aug 29, 2018 at 7:26

Evgeny Kuznetsov

2,1983 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dat Tran · Accepted Answer · 2018-08-13 10:31:57Z

1

I think, instead of mocking connect function of redux-connect. You should mock the action itself. replace ../actions with your actions file.

import { onPress } from "../actions";
jest.mock("../actions");

onPress.mockReturnValue({ someval: 1 });

answered Aug 13, 2018 at 10:31

Dat Tran

1,5961 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

Connected Component testing with certain prop (React/Redux)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related