Select component is not rendering children when using enzyme

[yoanisgil]

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

[steelx]

Same here. Im trying to read MenuItem which is inside SelectField

<SomeComponent /> // which has Table, TableRowColumn, SelectField

const mountWithContext = (node) => mount(node, {context: {muiTheme}, childContextTypes: {muiTheme: PropTypes.object}});

const wrapper = mountWithContext(<Goals goal={goal} onChange={() => 'test'} />);

const unitOptions = wrapper.find('SelectField#unit MenuItem'); //which has 2 items

console.log("unitOptions: ", unitOptions); // prints ReactWrapper { length: 0 }

[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

[steelx]

@oliviertassinari Im using SelectField inside a component. So I face issue while testing that component since Im not able to find MenuItem inside SelectField.

Can you suggest me any workaround.

[oliviertassinari]

@steelx SelectField is a v0.x component, my comment only targets v1+.

[yoanisgil]

@oliviertassinari I was looking at those tests but they are for SelectInput and I'm using Select. I was also looking at this:

https://github.com/mui-org/material-ui/blob/6e8ffbfe6d0317763b57022f745cb89895fed1e6/packages/material-ui/src/Select/Select.test.js#L37

and initially I would have expected to see a test around making sure that all children are rendered. But maybe is because the issue that we are discussing here?

[oliviertassinari]

@yoanisgil We have another test:
https://github.com/mui-org/material-ui/blob/6e8ffbfe6d0317763b57022f745cb89895fed1e6/packages/material-ui/test/integration/Select.test.js#L8

[talmukund]

@oliviertassinari I think none of the children component gets rendered if we use enzyme. I have observed similar behavior with Dialog.
https://github.com/mui-org/material-ui/issues/9200

[yoanisgil]

I think the issue is that they get rendered but not as children of the Select component so that's why they can't be found. At least that's what I see when I inspect the DOM while my application, that contains a Select, is running.

[oliviertassinari]

@talmukund @yoanisgil What version of enzyme are you using? The portal part was an important pain point when I upgraded from React 15.x to React 16.x. We have removed our "hack" recently as enzyme better support the Portal API. Maybe, it's still in need for you guys: #10208

[oliviertassinari]

If that works, we can consider adding an option to the portal to disable the behavior for testing purposes.

[yoanisgil]

Using:

"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1"

I'm not sure I understand the previous comment :(.

[talmukund]

@oliviertassinari I have also observed issue comes only when component is part of portal. I will check same issue with react 15.x.

[steelx]

Im not using Portal though Im using React 16.2.0

[oliviertassinari]

I think that we can move the discussion to enzymejs/enzyme#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]

I'm reverting. It was working fine… I have added a test case in #11116.

it('should work with a high-level component like the Select', () => {
  const wrapper = mount(
    <Select value={1} open>
      <MenuItem value={1}>
        <em>1</em>
      </MenuItem>
      <MenuItem value={2}>
        <em>2</em>
      </MenuItem>
    </Select>,
  );

  assert.strictEqual(wrapper.find(MenuItem).length, 2);
});

[yoanisgil]

Ok. Let me know once it's merged and I can test ;).