Select component is not rendering children when using enzyme

The Select component is not rendering it’s children when using enzyme’s mount function.

• I have searched the issues of this repository and believe that this is not a duplicate.

The following test should pass:

    test('it renders all datasets', () => {
        let datasets = [
            new DataSet({id: 'ds-1', name: 'ds 1', sequences: []}),
            new DataSet({id: 'ds-2', name: 'ds 2', sequences: []}),
            new DataSet({id: 'ds-3', name: 'ds 3', sequences: []}),
        ];

        let newProps = {
            ...props,
            datasets: datasets,
            currentDataSet: datasets[0],
            filters: {selectedDataSet: datasets[0].getId()}
        };

        let wrappedComponent = mount(<DataSetSelect {...newProps}/>);

        expect(wrappedComponent.find('MenuItem').length).toBe(3);
    });

Current Behavior

The test fails with:

    expect(received).toBe(expected)

    Expected value to be (using ===):
      3
    Received:
      0

Context

The component itself renders like this:

render() {
        let {classes} = this.props;

        return (
            <div className={classes.root}>
                <Grid container className={classes.root}>
                    <Grid item xs={1}>
                        <p>Select a dataset</p>
                    </Grid>
                    <Grid item xs={3}>
                        <form>
                            <FormControl className={classes.formControl}>
                                <Select onChange={(event) => this.handleChange(event)}
                                        value={this.props.filters.selectedDataSet}
                                        inputProps={{
                                            name: 'selectedDataSet',
                                            id: 'selected-dataSet',
                                        }}>
                                    {this.props.datasets.map((dataSet) => <MenuItem key={dataSet.getId()}
                                                                                    value={dataSet.getId()}>{dataSet.getName()}</MenuItem>)}
                                </Select>
                            </FormControl>

                        </form>

                    </Grid>
                    <Grid item xs={2}>
                        <p>
                            Dataset name: {this.props.currentDataSet.getName()}
                        </p>
                    </Grid>
                </Grid>
            </div>
        );
    }

Your Environment

Tech	Version
Material-UI	1.0.0-beta.35
React	16.2.0
Jest	20.0.4

[oliviertassinari]

I think that we can move the discussion to https://github.com/airbnb/enzyme/issues/252.

Regarding the workaround. People can follow the old approach we were using https://github.com/mui-org/material-ui/pull/10208/files. It’s basically mocking the portal so it renders directly into the DOM. I’m also working on adding a global __MUI_PORTAL_DISABLE__ flag for the tests to make it even simpler to use: #11086.

[oliviertassinari]

@yoanisgil I fear it’s a limitation of enzyme. The Select component portals it’s children to the body. I would encourage you to have a look at our tests: https://github.com/mui-org/material-ui/blob/6e8ffbfe6d0317763b57022f745cb89895fed1e6/packages/material-ui/src/Select/SelectInput.test.js#L10