Enzyme mount rendering multiple components when only one exists

Viewed 820

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>
1 Answers

The issue described is known here and the solution is there as well. In my case hostNodes helped me.

Do similar to :

wrapper.find('#yourSelector').hostNodes().text();
Related