I'm having a bit of a challenge wrapping my head around why enzyme's mount is rendering multiple elements when only one exists.
I have a snackbar from Material UI with a data-test-id shown below:
<MySnackbar
open={true}
variant="error"
message={"Test message"}
onClose={this.handleRequestClose}
data-test-id="snackbar_isErrorWhileCheckingUpdates"
/>
I tested this as shown below:
it("Should render notification snackbars for information", () => {
const wrapper = mount(
<Provider store={mockStore(initialState)}>
<Updates.WrappedComponent location={location} history={history} match={match} {...props} path={path}/>
</Provider>;
expect(wrapper.find('[data-test-id="snackbar_isErrorWhileCheckingUpdates"]')).toHaveLength(1);
})
The above test fails because it finds 2 elements.
When I use hostNodes() it returns 0 elements.
I'm wondering what happens and enzyme renders multiple components.
EDIT
Below are the contents of when debug() is called
<WithStyles(MySnackbar) open={false} variant="error" message="There was a network problem whilst checking for updates" onClose={[Function]} data-test-id="snackbar_isErrorWhileCheckingUpdates">
<MySnackbar classes={{...}} open={false} variant="error" message="There was a network problem whilst checking for updates" onClose={[Function]} data-test-id="snackbar_isErrorWhileCheckingUpdates">
<WithStyles(ForwardRef(Snackbar)) open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}}>
<ForwardRef(Snackbar) classes={{...}} open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}} />
</WithStyles(ForwardRef(Snackbar))>
</MySnackbar>
</WithStyles(MySnackbar)>
<MySnackbar classes={{...}} open={false} variant="error" message="There was a network problem whilst checking for updates" onClose={[Function]} data-test-id="snackbar_isErrorWhileCheckingUpdates">
<WithStyles(ForwardRef(Snackbar)) open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}}>
<ForwardRef(Snackbar) classes={{...}} open={false} autoHideDuration={5000} onClose={[Function]} message={{...}} action={{...}} />
</WithStyles(ForwardRef(Snackbar))>
</MySnackbar>