From 45cbd62688ee86afb6c96e9e1dbdb48d9e4021c6 Mon Sep 17 00:00:00 2001 From: Oleg Tsvetkov Date: Thu, 16 Jul 2026 15:36:58 +0300 Subject: [PATCH 1/2] Add non-reagent render namespace to avoid importing @testing-library/react Add react-testing-library-cljs.render wrapping render/cleanup/act from @testing-library/react, so plain-React (non-Reagent) tests no longer import the JS module directly. Migrate the library's own tests to it (the reagent variant already had reagent.render). The node-test-example keeps the direct import for now: it depends on the published 0.0.20, which predates this namespace. It can adopt the wrapper once a release including it ships. --- README.md | 2 ++ .../react_testing_library_cljs/render.cljs | 28 +++++++++++++++++++ .../deftest_async_macro_test.cljs | 2 +- .../fire_event_test.cljs | 2 +- .../screen_async_test.cljs | 2 +- .../screen_test.cljs | 2 +- .../user_event_async_test.cljs | 2 +- .../user_event_promesa_test.cljs | 2 +- .../user_event_test.cljs | 2 +- .../within_async_test.cljs | 2 +- .../within_test.cljs | 2 +- 11 files changed, 39 insertions(+), 9 deletions(-) create mode 100644 src/main/react_testing_library_cljs/render.cljs diff --git a/README.md b/README.md index c3fb000..41573df 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ For more information about the principles and concepts behind the testing librar - The `react-testing-library-cljs.screen` namespace provides a wrapper around the `react-testing-library`'s `screen` object, making it easier to interact with rendered components. +- The `react-testing-library-cljs.render` namespace wraps `render`, `cleanup`, and `act` from `@testing-library/react` so plain-React (non-Reagent) tests don't import the JS module directly. Reagent users should use `react-testing-library-cljs.reagent.render` instead. + - The `react-testing-library-cljs.fire-event` namespace simplifies firing events on rendered components, allowing you to simulate user interactions. - The `react-testing-library-cljs.within` namespace scopes queries to a specific element, useful when multiple similar elements exist in the DOM. diff --git a/src/main/react_testing_library_cljs/render.cljs b/src/main/react_testing_library_cljs/render.cljs new file mode 100644 index 0000000..900bfb7 --- /dev/null +++ b/src/main/react_testing_library_cljs/render.cljs @@ -0,0 +1,28 @@ +(ns react-testing-library-cljs.render + "Wraps @testing-library/react's render, cleanup, and act for plain-React tests. + Reagent users should use `react-testing-library-cljs.reagent.render` instead." + (:require + ["@testing-library/react" :as rtl])) + +(defn render + "Renders a React element and returns the @testing-library/react result. + + See [render](https://testing-library.com/docs/react-testing-library/api/#render)." + ([element] + (rtl/render element)) + ([element options] + (rtl/render element (clj->js options)))) + +(defn cleanup + "Unmounts anything rendered by `render`; call it between tests. + + See [cleanup](https://testing-library.com/docs/react-testing-library/api/#cleanup)." + [] + (rtl/cleanup)) + +(defn act + "Runs `callback` inside React's act() so updates and effects flush. + + See [act](https://testing-library.com/docs/react-testing-library/api/#act)." + [callback] + (rtl/act callback)) diff --git a/src/test/react_testing_library_cljs/deftest_async_macro_test.cljs b/src/test/react_testing_library_cljs/deftest_async_macro_test.cljs index e278773..7e89484 100644 --- a/src/test/react_testing_library_cljs/deftest_async_macro_test.cljs +++ b/src/test/react_testing_library_cljs/deftest_async_macro_test.cljs @@ -2,11 +2,11 @@ "Smoke-tests the `deftest-async` macro, the pre-3.4 compatibility path. Requires `promesa`; native `^:async` tests need shadow-cljs 3.4+ instead." (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [is]] [promesa.core :as p] [react-testing-library-cljs.async :refer-macros [deftest-async]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen])) (defn- render-el [element] diff --git a/src/test/react_testing_library_cljs/fire_event_test.cljs b/src/test/react_testing_library_cljs/fire_event_test.cljs index b149967..701f1e0 100644 --- a/src/test/react_testing_library_cljs/fire_event_test.cljs +++ b/src/test/react_testing_library_cljs/fire_event_test.cljs @@ -1,9 +1,9 @@ (ns react-testing-library-cljs.fire-event-test (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is testing]] [react-testing-library-cljs.fire-event :as fire-event] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen])) (defn- counter-component [] diff --git a/src/test/react_testing_library_cljs/screen_async_test.cljs b/src/test/react_testing_library_cljs/screen_async_test.cljs index 5019512..f7800c0 100644 --- a/src/test/react_testing_library_cljs/screen_async_test.cljs +++ b/src/test/react_testing_library_cljs/screen_async_test.cljs @@ -2,9 +2,9 @@ "Exercises `screen`'s async queries with native async (`^:async` / `await`). Requires shadow-cljs 3.4+ (ClojureScript 1.12.145+)." (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen])) (defn- render-el [element] diff --git a/src/test/react_testing_library_cljs/screen_test.cljs b/src/test/react_testing_library_cljs/screen_test.cljs index e107b78..08fe646 100644 --- a/src/test/react_testing_library_cljs/screen_test.cljs +++ b/src/test/react_testing_library_cljs/screen_test.cljs @@ -1,8 +1,8 @@ (ns react-testing-library-cljs.screen-test (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is testing]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen])) (defn- render-el [element] diff --git a/src/test/react_testing_library_cljs/user_event_async_test.cljs b/src/test/react_testing_library_cljs/user_event_async_test.cljs index 4a83566..bf1cf56 100644 --- a/src/test/react_testing_library_cljs/user_event_async_test.cljs +++ b/src/test/react_testing_library_cljs/user_event_async_test.cljs @@ -2,9 +2,9 @@ "Exercises user-event interactions with native async (`^:async` / `await`). Requires shadow-cljs 3.4+ (ClojureScript 1.12.145+)." (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen] [react-testing-library-cljs.user-event :as user-event])) diff --git a/src/test/react_testing_library_cljs/user_event_promesa_test.cljs b/src/test/react_testing_library_cljs/user_event_promesa_test.cljs index c20f4b8..1f5a258 100644 --- a/src/test/react_testing_library_cljs/user_event_promesa_test.cljs +++ b/src/test/react_testing_library_cljs/user_event_promesa_test.cljs @@ -3,11 +3,11 @@ This is the pre-3.4 compatibility path; the native equivalents live in `user-event-async-test`." (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [is]] [promesa.core :as p] [react-testing-library-cljs.async :refer-macros [deftest-async]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen] [react-testing-library-cljs.user-event :as user-event])) diff --git a/src/test/react_testing_library_cljs/user_event_test.cljs b/src/test/react_testing_library_cljs/user_event_test.cljs index ab185c4..5a10193 100644 --- a/src/test/react_testing_library_cljs/user_event_test.cljs +++ b/src/test/react_testing_library_cljs/user_event_test.cljs @@ -1,8 +1,8 @@ (ns react-testing-library-cljs.user-event-test (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is async]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen] [react-testing-library-cljs.user-event :as user-event])) diff --git a/src/test/react_testing_library_cljs/within_async_test.cljs b/src/test/react_testing_library_cljs/within_async_test.cljs index e1493a7..5c5dac1 100644 --- a/src/test/react_testing_library_cljs/within_async_test.cljs +++ b/src/test/react_testing_library_cljs/within_async_test.cljs @@ -2,9 +2,9 @@ "Exercises `within`'s async queries with native async (`^:async` / `await`). Requires shadow-cljs 3.4+ (ClojureScript 1.12.145+)." (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen] [react-testing-library-cljs.within :as within])) diff --git a/src/test/react_testing_library_cljs/within_test.cljs b/src/test/react_testing_library_cljs/within_test.cljs index ee957e6..611894f 100644 --- a/src/test/react_testing_library_cljs/within_test.cljs +++ b/src/test/react_testing_library_cljs/within_test.cljs @@ -1,8 +1,8 @@ (ns react-testing-library-cljs.within-test (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is testing]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen] [react-testing-library-cljs.within :as within])) From 01395c698ed8e00590c8a6fba2452d7db7ee6edd Mon Sep 17 00:00:00 2001 From: Oleg Tsvetkov Date: Thu, 16 Jul 2026 15:59:26 +0300 Subject: [PATCH 2/2] Point node-test-example at the library source; use the render wrapper Reference ../../src/main via :source-paths and drop the Clojars dependency, so the example builds against the in-repo library at HEAD with no publish step. This lets it adopt the new react-testing-library-cljs.render namespace immediately (plain-react test no longer imports @testing-library/react). reagent-karma-example intentionally stays on the published Clojars dependency to demonstrate that setup. --- examples/node-test-example/README.md | 7 +++++-- examples/node-test-example/shadow-cljs.edn | 9 ++++++--- examples/node-test-example/src/app/plain_react_test.cljs | 2 +- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/examples/node-test-example/README.md b/examples/node-test-example/README.md index c51f83e..fade76b 100644 --- a/examples/node-test-example/README.md +++ b/examples/node-test-example/README.md @@ -16,8 +16,11 @@ no browser required. This is the simplest setup and runs end to end in CI. ## Setup essentials -- `shadow-cljs.edn` declares `reagent` and the library as `:dependencies` and a - `:node-test` build with an `app.test-setup` preload. +- `shadow-cljs.edn` declares `reagent` as a dependency and a `:node-test` build + with an `app.test-setup` preload. It references the library's source in this + repo via `:source-paths` (so the example always tracks HEAD); a standalone + project would add the Clojars dependency instead — see the repository root + README. - `src/app/test_setup.cljs` registers jsdom (`global-jsdom/register`) and sets `IS_REACT_ACT_ENVIRONMENT`, giving the tests a DOM and reliable React updates. diff --git a/examples/node-test-example/shadow-cljs.edn b/examples/node-test-example/shadow-cljs.edn index 72016cb..456260e 100644 --- a/examples/node-test-example/shadow-cljs.edn +++ b/examples/node-test-example/shadow-cljs.edn @@ -3,6 +3,9 @@ :ns-regexp "-test$" :output-to "out/test.js" :devtools {:preloads [app.test-setup]}}} - :dependencies [[reagent "2.0.1"] - [org.clojars.olecve/react-testing-library-cljs "0.0.20"]] - :source-paths ["src"]} + :dependencies [[reagent "2.0.1"]] + ;; Reference the library's source in this repo directly (instead of the + ;; published Clojars dependency) so the example always tracks HEAD and needs + ;; no release. A standalone project would add the Clojars dependency instead + ;; (see the repository root README). + :source-paths ["src" "../../src/main"]} diff --git a/examples/node-test-example/src/app/plain_react_test.cljs b/examples/node-test-example/src/app/plain_react_test.cljs index 9e120e7..5eff7a7 100644 --- a/examples/node-test-example/src/app/plain_react_test.cljs +++ b/examples/node-test-example/src/app/plain_react_test.cljs @@ -2,9 +2,9 @@ "Testing plain React (no Reagent): raw createElement with user-event and async queries. Uses native ClojureScript async (`^:async` / `await`)." (:require - ["@testing-library/react" :as rtl] ["react" :as react] [cljs.test :refer [deftest is]] + [react-testing-library-cljs.render :as rtl] [react-testing-library-cljs.screen :as screen] [react-testing-library-cljs.user-event :as user-event]))