Fail to mock a function of react component props [duplicate] - reactjs

Question

I have a component called NamespaceMenu below.
export class NamespaceMenu extends Component {
// omit some code here
refreshNamespace = (e) => {
e.stopPropagation()
this.setState({
...this.initialState,
isRefreshing: true,
})
fetchNamespaces()
}
// omit some code here
}
function mapDispatchToProps(dispatch) {
return {
fetchNamespaces: bindActionCreators(getNameSpaces, dispatch),
}
const mapStateToProps = (state, ownProps) => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NamespaceMenu)
I write a UT for this component
/* eslint-disable react/jsx-props-no-spreading */
import React from 'react'
import renderer from 'react-test-renderer'
import thunk from 'redux-thunk'
import configureMockStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import NamespaceMenu from '../index'
jest.mock('#lib/TextSearchHighlight', () => () => <div>TextSearchHighlight</div>)
jest.mock('lib/Button', () => () => <div>Button</div>)
jest.mock('../SearchBox', () => () => <div>SearchBox</div>)
jest.mock('../../../../LoadingWaitbox', () => () => <div>LoadingWaitBox</div>)
jest.mock('../../../../../InformationWithDetails', () => () => <div>InformationWithDetails</div>)
const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)
const namespaces = [
{
id: 'id1',
name: 'ns1',
shouldDisplay: true,
},
{
id: 'id2',
name: 'ns2',
shouldDisplay: false,
},
]
describe('NamespaceMenu/index.js', () => {
let store
let component
let instance
let props
let mockCleanHandler
let mockLoadSelectedDataSources
beforeEach(() => {
mockCleanHandler = jest.fn()
mockLoadSelectedDataSources = jest.fn()
props = {
cleanHandler: mockCleanHandler,
visible: true,
dbRoleId: 'dbRoleId1',
}
store = mockStore({
dbRoleId: namespaces,
})
component = renderer.create(
<Provider store={store}>
<NamespaceMenu {...props} />
</Provider>
)
instance = component.root.children[0].children[0].instance
instance.props = {
...instance.props,
expandDbRole: jest.fn(),
setNamespaceDisplayState: jest.fn(),
loadSelectedDataSources: mockLoadSelectedDataSources,
}
})
// UT code A
it('when calling refreshNamespace', () => {
const mockFetchNamespaces = jest.fn()
// without the code below
// instance.setState = jest.fn()
instance.props = {
...instance.props,
fetchNamespaces: mockFetchNamespaces,
}
instance.refreshNamespace()
expect(mockFetchNamespaces.mock.calls.length).toEqual(1)
})
})
There is an error:
TypeError: Cannot read property 'getNameSpaces' of undefined
This error is thrown from the implemention code of fetchNamespaces.
Yes, the code fails to mock fetchNamespaces
The I change the code a little.
I mock the setState. It works!
// UT code B
it('when calling refreshNamespace', () => {
const mockFetchNamespaces = jest.fn()
// The line below is added. Yes, I mock the `setState`
instance.setState = jest.fn()
instance.props = {
...instance.props,
fetchNamespaces: mockFetchNamespaces,
}
instance.refreshNamespace()
expect(mockFetchNamespaces.mock.calls.length).toEqual(1)
})
Why UT code A fails and UT code B passes?
It seems that setState is the key to the question.