ThomasThiebaud ThomasThiebaud - 1 month ago 12
React JSX Question

Why mapStateToProps do not map to the right prop?



I have this container

import { connect } from 'react-redux'
import { createType, getTypes } from '../modules/type'

import Type from '../components/Type'

const mapDispatchToProps = {
createType,
getTypes
}

const mapStateToProps = state => ({
types: state.type.types
})

export default connect(mapStateToProps, mapDispatchToProps)(Type)


and I would like to test it using
enzyme
. To do it, I'm using this test

import React from 'react'
import { Provider } from 'react-redux'
import { mount } from 'enzyme'

import TypeContainer from 'routes/Type/containers/TypeContainer'

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const mockStore = configureMockStore([ thunk ]);
const mockStoreInitialized = mockStore({
type: {
types: [
{id: 1, name: 'type 1'}
]
}
});

describe.only('(Route) Type', () => {
it('should get container', () => {
const wrapper = mount(
<Provider store={mockStoreInitialized}>
<TypeContainer />
</Provider>
)

expect(wrapper.find(TypeContainer).prop('types')).to.deep.equal([{id: 1, name: 'type 1'}])
})
})


The test is failing (at the assertion level) because
wrapper.find(TypeContainer).props()
is empty. I can not find find why.

The strange thing is that if I check the coverage report, my test passed into the
mapStateToProps
function.

Did I missed something ?

Answer

TypeContainer won't have a prop called types, it will pull types from the store and pass it to Type, which will have a prop called types. So it's not that mapStateToProps is not doing the right thing; it's just you're making assertions against the wrong object.

Comments