tests: use create-root

pitch-io · Apr 21, 2023 · 32e0bc9 · 32e0bc9
1 parent 2d11b81
commit 32e0bc9
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 37 deletions.
diff --git a/core/test/uix/core_test.cljs b/core/test/uix/core_test.cljs
@@ -84,18 +84,18 @@
                     :render (fn []
                               (this-as this
                                        (swap! actual assoc :render {:state (.-state this) :props (.-props this)})
-                                       "Hello!"))})
-        root (js/document.createElement "div")]
-    (react-dom/render ($ component {:x 1}) root)
-    (is (instance? component (-> @actual :constructor :this)))
-    (is (-> @actual :constructor :props .-argv (= {:x 1})))
-    (is (instance? component (-> @actual :getInitialState :this)))
-    (is (-> @actual :render :props .-argv (= {:x 1})))
-    (is (-> @actual :render :state .-x (= 1)))
-    (is (:componentDidMount @actual))
-    (is (= "Hello!" (.-textContent root)))
-    (react-dom/unmountComponentAtNode root)
-    (is (:componentWillUnmount @actual))))
+                                       "Hello!"))})]
+    (t/with-react-root
+      ($ component {:x 1})
+      (fn [node]
+        (is (instance? component (-> @actual :constructor :this)))
+        (is (-> @actual :constructor :props .-argv (= {:x 1})))
+        (is (instance? component (-> @actual :getInitialState :this)))
+        (is (-> @actual :render :props .-argv (= {:x 1})))
+        (is (-> @actual :render :state .-x (= 1)))
+        (is (:componentDidMount @actual))
+        (is (= "Hello!" (.-textContent node))))
+      #(is (:componentWillUnmount @actual)))))
 
 (deftest test-convert-props
   (testing "shallow conversion"
@@ -169,22 +169,23 @@
 
 (deftest test-fn
   (let [anon-named-fn (uix.core/fn fn-component [{:keys [x]}] x)
-        anon-fn (uix.core/fn [{:keys [x]}] x)
-        root (js/document.createElement "div")]
+        anon-fn (uix.core/fn [{:keys [x]}] x)]
 
     (is (.-uix-component? ^js anon-named-fn))
     (is (= (.-displayName anon-named-fn) "fn-component"))
 
     (is (.-uix-component? ^js anon-fn))
     (is (str/starts-with? (.-displayName anon-fn) "uix-fn"))
 
-    (react-dom/render ($ anon-named-fn {:x "HELLO!"}) root)
-    (is (= "HELLO!" (.-textContent root)))
-    (react-dom/unmountComponentAtNode root)
+    (t/with-react-root
+      ($ anon-named-fn {:x "HELLO!"})
+      (fn [node]
+        (is (= "HELLO!" (.-textContent node)))))
 
-    (react-dom/render ($ anon-fn {:x "HELLO! 2"}) root)
-    (is (= "HELLO! 2" (.-textContent root)))
-    (react-dom/unmountComponentAtNode root)))
+    (t/with-react-root
+      ($ anon-fn {:x "HELLO! 2"})
+      (fn [node]
+        (is (= "HELLO! 2" (.-textContent node)))))))
 
 (defui dyn-uix-comp [props]
   ($ :button props))
@@ -244,29 +245,29 @@
      ($ :p "After throwing 2")))
 
 (deftest ssr-error-boundaries
-  (let [root (js/document.createElement "div")]
-    (react-dom/render ($ error-boundary-no-elements) root)
-    (is (= (.-textContent root)  ""))
-    (react-dom/unmountComponentAtNode root)
+  (t/with-react-root
+    ($ error-boundary-no-elements)
+    #(is (= (.-textContent %) "")))
 
-    (react-dom/render ($ error-boundary-catches) root)
-    (is (= (.-textContent root) "Error"))
-    (react-dom/unmountComponentAtNode root)
+  (t/with-react-root
+    ($ error-boundary-catches)
+    #(is (= (.-textContent %) "Error")))
 
-    (react-dom/render ($ error-boundary-renders) root)
-    (is (= (.-textContent root) "After"))
-    (react-dom/unmountComponentAtNode root)
+  (t/with-react-root
+    ($ error-boundary-renders)
+    #(is (= (.-textContent %) "After")))
 
-    (react-dom/render ($ error-boundary-children) root)
-    (is (= (.-textContent root) "After throwingAfter throwing 2"))
-    (react-dom/unmountComponentAtNode root)))
+  (t/with-react-root
+    ($ error-boundary-children)
+    #(is (= (.-textContent %) "After throwingAfter throwing 2"))))
 
 (deftest ssr-error-boundary-catch-fn
   (reset! *error-state nil)
-  (let [root (js/document.createElement "div")
-        _    (react-dom/render ($ error-boundary-catches) root)]
-    ;; Tests that did-catch does run
-    (is (str/includes? @*error-state "Component throws"))))
+  (t/with-react-root
+    ($ error-boundary-catches)
+    (fn [_]
+      ;; Tests that did-catch does run
+      (is (str/includes? @*error-state "Component throws")))))
 
 (defn -main []
   (run-tests))
diff --git a/core/test/uix/test_utils.cljs b/core/test/uix/test_utils.cljs
@@ -1,5 +1,7 @@
 (ns uix.test-utils
   (:require ["react-dom/server" :as rserver]
+            ["react-dom/client" :as rdc]
+            ["react-dom/test-utils" :as rdt]
             [goog.object :as gobj]
             [clojure.test :refer [is]]
             [uix.dom :as dom]))
@@ -29,3 +31,18 @@
         _ (.append (.getElementById js/document "root") node)
         root (dom/create-root node)]
     (dom/render-root el root)))
+
+(defn with-react-root
+  ([el f]
+   (with-react-root el f (fn [])))
+  ([el f after-unmount]
+   (set! (.-IS_REACT_ACT_ENVIRONMENT js/globalThis) true)
+   (let [node (js/document.createElement "div")
+         _ (js/document.body.append node)
+         root (rdc/createRoot node)]
+     (rdt/act #(.render root el))
+     (f node)
+     (rdt/act #(.unmount root))
+     (after-unmount)
+     (.remove node)
+     (set! (.-IS_REACT_ACT_ENVIRONMENT js/globalThis) false))))