title: How to fix the "Warning: useLayoutEffect does nothing on the server"?
body: <p>Heres the full error:</p>
  <blockquote>
  <p>Warning: useLayoutEffect does nothing on the server, because its
  effect cannot be encoded into the server renderer's output format.
  This will lead to a mismatch between the initial, non-hydrated UI and
  the intended UI. To avoid this, useLayoutEffect should only be used in
  components that render exclusively on the client</p>
  <pre><code>      in ForwardRef(ButtonBase)
        in WithStyles(ForwardRef(ButtonBase))
        in ForwardRef(Button)
        in WithStyles(ForwardRef(Button))
        in form
        in div
  </code></pre>
  </blockquote>
  <p>I get it every time I run my test.  Heres my test</p>
  <pre><code>/* eslint-disable quotes */
  import React from &quot;react&quot;
  import { shallow, configure } from &quot;enzyme&quot;
  import LoginForm from &quot;../src/components/LoginForm&quot;
  import Button from &quot;@material-ui/core/Button&quot;
  import Adapter from &quot;enzyme-adapter-react-16&quot;
  import { render, fireEvent, cleanup } from &quot;@testing-library/react&quot;
  
  configure({ adapter: new Adapter() })
  
  describe(&quot;&lt;LoginForm /&gt;&quot;, () =&gt; {
    let wrapper
    let usernameInput
    let passwordInput
    let signInButton
  
    // Create initial props that get passed into the component
    const initialProps = {
      location: {
        state: {
          from: {
            pathname: &quot;/&quot;,
          },
        },
      },
    }
  
    // Unit testing
    describe(&quot;Unit tests&quot;, () =&gt; {
      // what to do before each test
      beforeEach(() =&gt; {
        // Render the login form component, pass in props. (Shallow method renders the component without its children, good for unit tests.)
        wrapper = shallow(&lt;LoginForm {...initialProps} /&gt;)
        usernameInput = wrapper.find(&quot;#username&quot;)
        passwordInput = wrapper.find(&quot;#password&quot;)
        signInButton = wrapper.find(Button)
      })
  
      // what to do after each test
      afterEach(() =&gt; {
        jest.clearAllMocks()
      })
  
      // UI Integrity test
      it(&quot;should match the snapshot&quot;, () =&gt; {
        // snapshots are text references of the html of the rendered component.
        expect(wrapper.html()).toMatchSnapshot()
      })
  
      it(&quot;should have a username inputs&quot;, () =&gt; {
        expect(usernameInput.length).toEqual(1)
      })
  
      it(&quot;should have the expected props on the username field&quot;, () =&gt; {
        expect(usernameInput.props()).toEqual({
          id: &quot;username&quot;,
          name: &quot;username&quot;,
          value: &quot;&quot;,
          type: &quot;username&quot;,
          onChange: expect.any(Function),
          required: true,
        })
      })
  
      it(&quot;should have a password field&quot;, () =&gt; {
        expect(passwordInput.length).toEqual(1)
      })
  
      it(&quot;should have the expected props on the password field&quot;, () =&gt; {
        expect(passwordInput.props()).toEqual({
          id: &quot;password&quot;,
          name: &quot;password&quot;,
          value: &quot;&quot;,
          type: &quot;password&quot;,
          onChange: expect.any(Function),
          required: true,
        })
      })
  
      it(&quot;should have a submit button&quot;, () =&gt; {
        expect(signInButton.length).toEqual(1)
      })
  
      it(&quot;should have the expected props on the button&quot;, () =&gt; {
        expect(signInButton.props()).toEqual({
          type: &quot;button&quot;,
          variant: &quot;contained&quot;,
          style: expect.objectContaining({
            marginTop: &quot;10px&quot;,
          }),
          onClick: expect.any(Function),
          children: &quot;Sign In&quot;,
        })
      })
    })
  
    // Integrations Testing
    describe(&quot;Integrations tests&quot;, () =&gt; {
      beforeEach(() =&gt; {
        // Render the login form component, pass in props. (render method renders the component with its children, good for integrations tests, uses react-test-library.)
        const { getByLabelText, getByText } = render(
          &lt;LoginForm {...initialProps} /&gt;
        )
        usernameInput = getByLabelText(/Username/i)
        passwordInput = getByLabelText(/Password/i)
        signInButton = getByText(&quot;Sign In&quot;)
      })
  
      afterEach(cleanup)
  
      it(&quot;Username text change in onChange event&quot;, () =&gt; {
        expect(usernameInput.value).toBe(&quot;&quot;)
  
        fireEvent.change(usernameInput, { target: { value: &quot;James&quot; } })
  
        expect(usernameInput.value).toBe(&quot;James&quot;)
      })
  
      it(&quot;Password text change in onChange event&quot;, () =&gt; {
        expect(passwordInput.value).toBe(&quot;&quot;)
  
        fireEvent.change(passwordInput, { target: { value: &quot;mypassword&quot; } })
  
        expect(passwordInput.value).toBe(&quot;mypassword&quot;)
      })
  
      it(&quot;Test button submit&quot;, () =&gt; {
        const mockLogin = jest.fn()
  
        const button = shallow(&lt;Button onClick={mockLogin} /&gt;)
  
        button.simulate(&quot;click&quot;)
  
        expect(mockLogin.mock.calls.length).toEqual(1)
      })
    })
  })
  </code></pre>
  <p>I believe it has something to do with the material-ui component.  I've looked into it, theres a similar question on <a href="https://stackoverflow.com/questions/57268689/how-to-fix-this-warning-uselayouteffect-related-warning">here</a> that says the issue has to do with a dependency that my project does not have.  So I think it has to do with the material-ui component using <code>useEffectLayout</code> and the testing env doesnt like that for some reason.  Im running my test with yarn and jest <code>yarn test</code> to run the test suite.</p>