Add unit test for missing observable changes before useEffect runs

This is a test to check that observable changes made between the
first component render and commit are not lost.

It currently fails (and did so before the change in PR mobxjs#119)

test/useObserver.test.tsx

@@ -3,6 +3,7 @@ import * as mobx from "mobx"
 import * as React from "react"
 import { act, cleanup, render } from "react-testing-library"
 
+import ReactDOM from "react-dom"
 import { useObserver } from "../src"
 import { resetCleanupScheduleForTests } from "../src/useObserver"
 
@@ -42,6 +43,34 @@ test("uncommitted observing components should not attempt state changes", () =>
     }
 })
 
+test("observable changes before first commit are not lost", () => {
+    const store = mobx.observable({ value: "initial" })
+
+    const TestComponent = () => useObserver(() => <div>{store.value}</div>)
+
+    // Render our observing component wrapped in StrictMode, but using
+    // raw ReactDOM.render (not react-testing-library render) because we
+    // don't want the useEffect calls to have run just yet...
+    const rootNode = document.createElement("div")
+    ReactDOM.render(
+        <React.StrictMode>
+            <TestComponent />
+        </React.StrictMode>,
+        rootNode
+    )
+
+    // Change our observable. This is happening between the initial render of
+    // our component and its initial commit, so it isn't fully mounted yet.
+    // We want to ensure that the change isn't lost.
+    store.value = "changed"
+
+    act(() => {
+        // no-op
+    })
+
+    expect(rootNode.textContent).toBe("changed")
+})
+
 test("uncommitted components should not leak observations", async () => {
     resetCleanupScheduleForTests()