Using Enzyme with Jest to test Material-UI Select control

[Eshan Rajapakshe]

I'm having an issue with testing Material-UI select option. Here I have tried to test all the options are loaded in the control. But when I put a console log debug it displays nothing on the options elements.

Also, I have noted that the menu items are rendered at the bottom of the page for Material-UI. Is there a specific way to get those? Below is the code that I have tried,

### Steps to Reproduce

ColorSelect.jsx

    import React from 'react';
    import { FormControl, MenuItem, Avatar, TextField } from '@material-ui/core';
    import styled from "styled-components";

    function ColorSelect(props) {
        return (
                <FormControl variant="outlined">
                    <TextField
                        id="color-id-input"
                        select
                        value={props.color}
                        label={props.color == "" ? "Color" : ""}
                        InputLabelProps={{ shrink: false }}
                        variant="outlined"
                        error={props.error}
                        helperText={props.helpertext}
                    >
                        <MenuItem style={{ fontSize: "13px" }} value="">
                            <em>None</em>
                        </MenuItem>
                        {
                            props.colors.map(color => (
                                <MenuItem key={"ColorNewLineMenuItem_" + color.colorCode} style={{ fontSize: "13px" }} value={color.colorCode}>
                                    <div>
                                        <Avatar key={"ColorNewLineAvatar_" + color.colorCode} src={color.imageSrc} />
                                        <div>{color.name}</div>
                                    </div>
                                </MenuItem>
                            ))
                        }
                    </TextField>
                </FormControl>
            )
    }
    
    export default ColorSelect;

ColorSelect.test.js

import * as React from 'react';
import MockProvider from '../../mockProvider';
import * as data from '../../data/poData.json';
import { act } from '@testing-library/react';
import { mount } from "enzyme";

import ColorSelect from '../../../components/order/ColorSelect';

test("check colors dropdown loads correctly", async () => {

     wrapper = mount(<MockProvider><ColorSelect color="" colors={data.products[0].colors} /> 
               </MockProvider>);

     await act(async () => {
            wrapper.find({ 'id': "color-id-input" }).last().simulate("click")
        });

     wrapper.update();

     console.log(wrapper.debug()) // Can't see the menu items
}

This is what the log shows,

[Wojciech Maj]

This is not a support forum. Please use stackoverflow.