Add a failing test for deferredUpdates not being respected

Author: gaearon

packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js

@@ -16,6 +16,11 @@ let ReactDOM;
 
 const AsyncMode = React.unstable_AsyncMode;
 
+const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
+  HTMLInputElement.prototype,
+  'value',
+).set;
+
 describe('ReactDOMFiberAsync', () => {
   let container;
 
@@ -47,6 +52,12 @@ describe('ReactDOMFiberAsync', () => {
     jest.resetModules();
     container = document.createElement('div');
     ReactDOM = require('react-dom');
+
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
   });
 
   it('renders synchronously by default', () => {
@@ -60,11 +71,53 @@ describe('ReactDOMFiberAsync', () => {
     expect(ops).toEqual(['Hi', 'Bye']);
   });
 
+  it('does not perform deferred updates synchronously', () => {
+    let inputRef = React.createRef();
+    let contentRef = React.createRef();
+
+    class Counter extends React.Component {
+      state = {asyncValue: ''};
+
+      handleChange = e => {
+        const nextValue = e.target.value;
+        ReactDOM.unstable_deferredUpdates(() => {
+          this.setState({
+            asyncValue: nextValue,
+          });
+        });
+      };
+
+      render() {
+        return (
+          <div>
+            <input
+              ref={inputRef}
+              onChange={this.handleChange}
+              defaultValue=""
+            />
+            <p ref={contentRef}>{this.state.asyncValue}</p>
+          </div>
+        );
+      }
+    }
+    ReactDOM.render(<Counter />, container);
+    expect(contentRef.current.textContent).toBe('');
+
+    setUntrackedInputValue.call(inputRef.current, 'hello');
+    inputRef.current.dispatchEvent(new MouseEvent('input', {bubbles: true}));
+
+    // Should not flush yet because it's a deferred update.
+    expect(contentRef.current.textContent).toBe('');
+
+    // Should flush now.
+    jest.runAllTimers();
+    expect(contentRef.current.textContent).toBe('hello');
+  });
+
   describe('with feature flag disabled', () => {
     beforeEach(() => {
       jest.resetModules();
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      container = document.createElement('div');
       ReactDOM = require('react-dom');
     });
 
@@ -91,7 +144,6 @@ describe('ReactDOMFiberAsync', () => {
     beforeEach(() => {
       jest.resetModules();
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      container = document.createElement('div');
       ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
       ReactDOM = require('react-dom');
     });