title: How do I unit test Material-ui textfield using enzyme?
body: <p>I am still learning ReactJS with Enzyme and Material-ui.</p>
  
  <p>I have a component with Material-ui's TextField and I would like to unit test the following situation.</p>
  
  <ol>
  <li>When user enters a string '123' on TextField on screen, the TextField should set 'error' to 'true' and display message 'Wrong Name format.' </li>
  </ol>
  
  <p>Component </p>
  
  <pre><code>import React, { useState } from "react";
  import TextField from "@material-ui/core/TextField";
  import Grid from "@material-ui/core/Grid";
  
  export const NameTextField = props =&gt; {
    const { onStateChange } = props;
    const [state, setState] = useState({
      errors: [],
      onChange: false,
      pristine: false,
      touched: false,
      inProgress: false,
      value: {
        name: ""
      }
    });
    const handleOnBlur = async event =&gt; {
      const inputStringLC = String(event.target.value).toLowerCase();
  
      // First verify the email is in good format
      if (inputStringLC !== "123") {
        // If true, verify username is available
        const updatedState = {
          ...state,
          touched: true,
          pristine: true,
          value: {
            name: inputStringLC
          },
          inProgress: false,
          errors: []
        };
        setState(updatedState);
        onStateChange(updatedState);
      } else {
        const updatedState = {
          ...state,
          touched: true,
          pristine: false,
          value: {
            name: inputStringLC
          },
          errors: ["Wrong Name format."]
        };
        setState(updatedState);
        onStateChange(updatedState);
      }
    };
  
    return (
      &lt;Grid container spacing={1}&gt;
        &lt;Grid item xs={12}&gt;
          &lt;TextField
            variant="outlined"
            required
            fullWidth
            id="name"
            label="Name"
            error={state.errors.length &gt; 0}
            helperText={state.errors.length &gt; 0 ? state.errors[0] : null}
            name="name"
            autoComplete="name"
            margin="dense"
            onBlur={handleOnBlur}
          /&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  };
  
  export default NameTextField;
  </code></pre>
  
  <p>Unit Test</p>
  
  <pre><code>import React from 'react';
  import { configure, shallow, mount } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import NameTextField from './NameTextField';
  import TextField from '@material-ui/core/TextField';
  import { createShallow } from '@material-ui/core/test-utils';
  
  
  configure({adapter: new Adapter()});
  
  describe('&lt;NameTextField /&gt;', ()=&gt; {
    let shallow;
  
    beforeAll(() =&gt; {
      shallow = createShallow();
    });
    let wrapper;
    beforeEach(()=&gt;{
      wrapper =  shallow(&lt;NameTextField /&gt;);
    });
  
    it('should render one &lt;TextField /&gt; element.', ()=&gt;{
      expect(wrapper.find(TextField)).toHaveLength(1);
    });
  
  
    it('should show error when entered', ()=&gt;{
      wrapper.find('#name').simulate('change', {target: {value: '123'}});
      expect(wrapper.find("#name").props().error).toBe(
          true);
      expect(wrapper.find("#name").props().helperText).toBe(
          'Wrong Name format.');
    });
  
  
  });
  </code></pre>
  
  <p>I get the following error.
  Error: expect(received).toBe(expected) // Object.is equality</p>
  
  <p>Expected: true
  Received: false</p>
  
  <p>Am I doing something wrong here?</p>