Enzyme: Empty props when use mount()

[anagami]

Hi!
I try test smart container(with connected from Redux). For connect store use {context: { store: mockStore(reduxState) }}

When use shallow(<Foo />), wrapper.props() - return correct connected props from state, but all find() methods fails(same #388 ).
When use mount(<Foo />) - wrapper.props() - empty object, but find() - working correct.
wrapper.debug() show props

<Connect(Foo)>                                                                             
  <Foo prop_one={{...}} prop_two={{...}} prop_dispatch={[Function]}> 
  ....

How with mount get connected props?

[aweary]

Can you share the test case that you're having this issue with? Thanks!

[anagami]

smart container:

class Dashboard extends Component {
    render() {
        return <div className="b-dashboard"></div>
    }
}

function mapStateToProps(state) {
    return {
        columns: state.structure.columns,
        sl: state.structure.sl
    }
}


function mapDispatchToProps(dispatch) {
    return {
        getStructure: bindActionCreators(getStructure, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)

helper:

let middlewares = [ thunk ],
    mockStore = configureMockStore(middlewares);

export function renderComponent(ComponentClass, props, reduxState={}) {
    let component = mount(<ComponentClass {...props} />, {
            context: { store: mockStore(reduxState) }
        });

    return component;
}

spec:

describe('<Dashboard />', () => {
    let wrapper, state;

    beforeEach(() => {
        state = {
            structure: mocksStructure.initialStructure,
            tickets: mocksTickets.initialTicketsParsed
        };
        wrapper = renderComponent(Dashboard, null, state);
    });

    it('check props', () => {
        console.log(wrapper.props())
    });
});

[ljharb]

When you use connected components or HOCs, the wrapped component is not actually an instanceof the constructor from which its made. Can you try .find('Dashboard') instead of .find(Dashboard)?

[anagami]

this work for me console.log(wrapper.find('Dashboard').props())
Thx!

If i right understand same problem with shallow()? When add HOC, wrapper move upper and child components not render?

[ljharb]

Yes, shallow has the same problem. Sadly this is always a problem when using higher-order components, because the "pure" component can't be used to locate the HOC it was produced from.

[aweary]

You can always export the pure component alongside the default wrapped component for testing:

export class PureComponent Extends React.Component {
// ...
}

export default HOC(PureComponent)

import {PureComponent} from './component'

// Test with PureComponent directly

Then you just mock the props passed in by the HOC.

[anagami]

Yup, before your answer with working case i do like this. But in this case need do much copy-paste for mapping props and actions for correct render nested components