title: Enzyme wrapper.update() causes ref input to no longer have value prop
body: <p>Here is a Code Sandbox that contains a test simulating this issue. The test in this Code Sandbox fails as described in this question: <a href="https://codesandbox.io/s/react-jest-and-enzyme-testing-c7vng" rel="nofollow noreferrer">https://codesandbox.io/s/react-jest-and-enzyme-testing-c7vng</a></p>
  
  <hr />
  
  <p>I'm trying to test the value of an <code>&lt;input /&gt;</code> that gets updated inside a <code>useEffect</code>. This is the code from the Code Sandbox, which is a simplified version of something I'm trying to do in a project.</p>
  
  <pre><code>import React, { useEffect, useRef, useState } from "react";
  
  const App = () =&gt; {
    const [count, setCount] = useState(0);
  
    useEffect(() =&gt; {
      ref.current.value = "";
      console.log(typeof ref.current.value);
    }, [count]);
  
    const ref = useRef(null);
  
    const handleClick = () =&gt; {
      setCount(count + 1);
      console.log(count);
    };
  
    return (
      &lt;div&gt;
        &lt;input ref={ref} type="text" /&gt;
        &lt;button onClick={handleClick}&gt;click me&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  
  </code></pre>
  
  <p>I use <code>useRef</code> to set the value of the <code>&lt;input /&gt;</code>.</p>
  
  <p>The <code>useEffect</code> gets called when the <code>&lt;button /&gt;</code> is clicked. The <code>&lt;button /&gt;</code> updates the <code>useState</code> <code>count</code>. <code>useEffect</code> is watching updates to <code>count</code>, and it gets called as a side-effect.</p>
  
  <p>In the <code>useEffect</code>, I set <code>ref.current.value</code> to an empty string, and then I log the <code>typeof</code> this value to verify that it's a string.</p>
  
  <p>In the test, I try to simulate this behavior:</p>
  
  <pre><code>describe("App", () =&gt; {
    const wrapper = mount(&lt;App /&gt;);
    wrapper.find("input").props().value = "hello";
    act(() =&gt;
      wrapper
        .find("button")
        .props()
        .onClick()
    );
    console.log(wrapper.find("input").debug());
    wrapper.update();
    console.log(wrapper.find("input").debug());
    expect(wrapper.find("input").length).toBe(1);
    expect(wrapper.find("input").props().value).toBe("hello");
  });
  </code></pre>
  
  <p>I set the <code>value</code> prop to <code>'hello'</code>. I then invoke the <code>&lt;button /&gt;</code> <code>onClick</code> prop, effectively clicking it. I then call <code>wrapper.update()</code>, and I also <code>debug()</code> log the <code>&lt;input /&gt;</code> before and after <code>update()</code>.</p>
  
  <p>Before, <code>update()</code>, the <code>&lt;input /&gt;</code> has a <code>value</code> prop containing <code>'hello'</code>. After the <code>update()</code>, the <code>&lt;input /&gt;</code> does not have a <code>value</code> prop. This causes the test to fail, saying that the <code>&lt;input /&gt;</code> <code>value</code> is undefined after the update.</p>
  
  <p>Shouldn't the input's value be <code>''</code> after the update? </p>