Jest unit test failed as the selectors get undifined - reactjs

Question

i am writing a test case for a component and it is using redux ,saga ,and selectors
The test case as follows
const initialState = {
fetching: false,
error: null,
StockProducts: [],
products: [],
filter: '5b438ae60599132cb8b64b67'
}
const mockStore = configureStore()
const store = mockStore(fromJS(initialState))
import Stock from '../Stock'
test('for onUpdate funcion', () => {
const props = {
setErrorPopUp: jest.fn(),
formSubmitAttempt: jest.fn()
}
const wrapper = shallow(<Stock {...props} store={store} />)
wrapper.instance().onUpdate({ quantity: 0 })
expect(props.setErrorPopUp).toHaveBeenCalled()
wrapper.instance().onUpdate({ quantity: 3 })
expect(props.formSubmitAttempt).toHaveBeenCalled()
})
However test failed and i am getting this error
TypeError: Cannot read property 'fetching' of undefined
12 | createSelector(
13 | selectStockDomain,
> 14 | ({ fetching }) => fetching
15 | )
16 |
17 | const StockError = () =>
That is from one of the selectors i have used for the component
What is the wrong with my test and why is this happening
And how can i resolved this
this is the stock component
// react core
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'
// component imports
// Selcetors and actions
import StockActions from './actions'
import ToastActions from 'containers/Toasts/actions'
import {
StockFetching,
StockError,
StockProducts,
StockFilter,
Products,
userData
} from './selectors'
// partials
const mapStateToProps = createStructuredSelector({
fetching: StockFetching(),
error: StockError(),
stockProducts: StockProducts(),
products: Products(),
filter: StockFilter(),
userData: userData()
})
const mapDispatchToProps = dispatch => ({
getStockProducts: () => {
dispatch(StockActions.getStockAttempt())
},
getProducts: payload => {
dispatch(StockActions.getProductsAttempt(payload))
},
formSubmitAttempt: payload => {
dispatch(StockActions.formSubmitAttempt(payload))
},
deleteStock: payload => {
dispatch(StockActions.deleteStockAttempt(payload))
},
setErrorPopUp: payload => {
dispatch(
ToastActions.setToast(payload.message, payload.action, payload.time)
)
},
reset: () => {
dispatch(StockActions.reset())
}
})
class Stock extends Component {
state = {
openCard: false,
showCard: false,
confirmDelete: false
}
// to show product details
onCard = openCard => {
this.setState({
openCard
})
}
// to show and close add to stock option
_ShowCard = () => {
this.setState({
showCard: !this.state.showCard
})
}
// onDlete Stock
onDeleteStock = data => {
let {
props: { deleteStock },
state: { confirmDelete }
} = this
if (confirmDelete) {
deleteStock(data)
this.setState({
confirmDelete: false
})
} else {
this.setState({
confirmDelete: true
})
}
}
// update the products
handlesubmit = data => {
if (parseInt(data.quantity) < 1) {
this.props.setErrorPopUp({
message:
'You cannot set quantity to zero.Please enter valid qunatity and try again',
action: 'danger',
time: '5000'
})
} else {
this.props.formSubmitAttempt({
product: data.product.key,
quantity: data.quantity
})
this._ShowCard()
}
}
onUpdate = data => {
if (parseInt(data.quantity) < 1) {
this.props.setErrorPopUp({
message: 'You cannot set quantity to zero.Use delete actions',
action: 'danger',
time: '5000'
})
} else {
this.props.formSubmitAttempt({
product: data.id,
quantity: data.quantity
})
}
}
onCancelDelete = () => {
this.setState({
confirmDelete: false
})
}
onGetStock = () => {
let { getStockProducts, getProducts, userData } = this.props
getStockProducts()
getProducts({ user: userData._id })
}
componentDidMount () {
this.onGetStock()
}
render () {
let {
props: { stockProducts, error, products, fetching },
state: { openCard, showCard, confirmDelete },
onCard,
onGetStock,
_ShowCard,
handlesubmit,
onUpdate,
onDeleteStock,
onCancelDelete
} = this
return (
<KeyboardAvoidingWrapper fluid enabled={!showCard}>
UI GOES HERE ....
</KeyboardAvoidingWrapper>
)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Stock)
Thanks

Answer 1

When you are testing a Component, it's a good idea to test just the behaviour of the Component independent of your redux store. Because, internally the store passes in state to the Component as props.
1. export your Component
So your Component definition code becomes
class Stock extends Component {
to
export class Stock extends Component {
2. import just the Component without the Connect HOC
Like this
import { Stock } from '../Stock'
test('for onUpdate funcion', () => {
const props = {
setErrorPopUp: jest.fn(),
formSubmitAttempt: jest.fn()
}
const wrapper = shallow(<Stock {...props} />)
// modify your code to see how your component behaves with different props
wrapper.instance().onUpdate({ quantity: 0 })
expect(props.setErrorPopUp).toHaveBeenCalled()
wrapper.instance().onUpdate({ quantity: 3 })
expect(props.formSubmitAttempt).toHaveBeenCalled()
})