Redux/Enzyme testing of nested components - reactjs

Question

I have a redux connected navigation bar component that renders two sub-components. One of these is a glorified button (not redux), the other a redux connected search bar.
In a test, I want to be able to render the button and confirm the right behaviour happens when it is clicked. However if I use shallow() then it only renders a placeholder for the button and the button itself is not available to be found and clicked. If I use mount(), then the test fails as my unit test is using the non redux export for the navigation bar, which then tries to render the child search bar component, which is redux connected - and it does not have the store to pass down.
using the non-redux export is fine for testing shallow renders, but what can I do to be able to test my navigation bar component by clicking the button - that can only be fully rendered with a mount() call?
The problem I have is in the below test, if I use shallow() then it cant find the button to simulate the click, as it has only rendered as a placeholder. If I use mount() then it fails to render the <Searchbar /> component, as that is a redux connected component and my test is passing props manually without a connected store.
Is there a way to configure my navigation bar component to pass the props through to the search bar if the store doesn't exist? Or to only conditionally deep render certain components? I only want to render the PanelTileButton, not the SearchBar
My navigation bar component
interface IControlBarProps {
includeValidated: boolean,
includeValidatedChanged: (includeValidated:boolean) => void,
}
export class ControlBar extends React.Component<IControlBarProps, {}> {
constructor(props: any) {
super(props);
}
public render() {
return <div className="Control-bar">
<div className="Control-left" >
<SearchBar />
</div>
<div className="Control-center" />
<div className="Control-right">
{this.getDashboardButton("IV", "Include Validated", this.props.includeValidated, () => this.props.includeValidatedChanged(!this.props.includeValidated))}
</div>
</div>
}
private getDashboardButton(key: string, title: string, newValue: boolean, action: (value:boolean) => void)
{
return <div className="Control-Bar-Right" key={key}>
<PanelTileButton text={title} iswide={false} highlighted={newValue}
// tslint:disable
onClick={() => action(newValue)} />
</div>
}
}
function mapStateToProps(state: IStoreState) {
return {
includeValidated: state.trade.includeValidated
};
}
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
includeValidatedChanged: (includeValidated:boolean) => {
dispatch(getIncludeValidatedChangedAction(includeValidated))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ControlBar);
My test
it('should handle clicking include validated button', () => {
const mockCallback = jest.fn();
const wrapper = mount(<ControlBar includeValidated={false} includeValidatedChanged={mockCallback} />);
expect(wrapper.find('div.Control-bar').exists()).toEqual(true);
expect(wrapper.find({highlighted: false}).exists()).toEqual(true);
const pb = wrapper.find("PanelTileButton").first();
pb.find('button').simulate('click', {preventDefault() {} });
expect(mockCallback.mock.calls.length).toBe(1);
})

Answer 1

You can also mock components so that you can avoid having to mock the redux store all the time when you prefer to use shallow
In the same folder as SearchBar.tsx, create a sub-folder named __mocks__, and in it place a file with the same name SearchBar.tsx (it's convention) that returns minimal html
import * as React from 'react';
export default function SearchBar() {
return <div>SearchBar</div>
}
And then in your test file
jest.mock('../SearchBar') // this detects the corresponding mock automatically
import { ControlBar } from '../ControlBar';
import { shallow } from 'enzyme';
...
it('should handle clicking include validated button', () => {
const mockCallback = jest.fn();
const wrapper = shallow(<ControlBar includeValidated={false} includeValidatedChanged={mockCallback} />);
...
})
...

Answer 2

For others looking into how to do this, I eventually solved it by wrapping my mounted component in a <Provider> tag and using redux-mock-store to pass a mock store down to the child components that would at least let them render.
import configureMockStore from 'redux-mock-store'
it('should handle clicking include validated button', () => {
const mockCallback = jest.fn();
const mockStore = configureMockStore([])(getTestStore());
const wrapper = mount(<Provider store={mockStore}><ControlBar includeValidated={false} includeValidatedChanged={mockCallback} /></Provider>);
expect(wrapper.find('div.Control-bar').exists()).toEqual(true);
expect(wrapper.find({highlighted: false}).exists()).toEqual(true);
const pb = wrapper.find("PanelTileButton").first();
pb.find('button').simulate('click', {preventDefault() {} });
expect(mockCallback.mock.calls.length).toBe(1);
})