Fork me on GitHub
#shadow-cljs
<
2024-04-22
>
Rei09:04:01

@thheller Hey there. Just a quick question: Is there any targets for react native testing? I'm using :node-test but it doesn't seem to be able to import react-native at the moment. I'll post both the SCLJS config + the logs in the thread.

Rei09:04:06

{:deps     {:aliases [:cljs :dev :test]}
 :nrepl    {:port 9000}
 :jvm-opts ["-Xmx2G"]
 :builds   {:native
            {:target     :react-native
             :init-fn    pjwt.client-native/init
             :output-dir "mobile/app"
             :dev        {:closure-defines  {'goog.DEBUG                                           true
                                             pjwt.client-native/SERVER_URL                         ""
                                             pjwt.client-native/IDENTITY_URL                       ""
                                             com.fulcrologic.fulcro.inspect.inspect_ws/SERVER_PORT 8237
                                             com.fulcrologic.fulcro.inspect.inspect_ws/SERVER_HOST "192.168.50.206"}
                          :compiler-options {:external-config {:guardrails {}}}}
             :release    {:compiler-options {:optimizations     :simple
                                             :infer-externs     :auto
                                             :variable-renaming :off
                                             :property-renaming :off
                                             :pretty-print      true
                                             :source-map        true}}
             :js-options {:node-modules-dir "mobile/node_modules"}
             :devtools   {:autoload   true
                          :after-load pjwt.client-native/start
                          :preloads   [shadow.expo.keep-awake
                                       pjwt.inspect-native-preload]}}
            :test
            {:target    :node-test
             :output-to "out/node-tests.js"
             :ns-regexp "-spec$"
             :autorun   true}}}

Rei09:04:23

$ shadow-cljs compile test
shadow-cljs - config: /home/suppaionigiri/projects/player-just-works-tm-copy/shadow-cljs.edn
shadow-cljs - starting via "clojure"
Loading initial Timbre config from: :default
[:test] Compiling ...
========= Running Tests =======================
SHADOW import error /home/suppaionigiri/projects/player-just-works-tm-copy/.shadow-cljs/builds/test/dev/out/cljs-runtime/shadow.js.shim.module$react_native.js
Error: Cannot find module 'react-native'
Require stack:
- /home/suppaionigiri/projects/player-just-works-tm-copy/out/node-tests.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Function.Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at /home/suppaionigiri/projects/player-just-works-tm-copy/.shadow-cljs/builds/test/dev/out/cljs-runtime/shadow.js.shim.module$react_native.js:3:81
    at global.SHADOW_IMPORT (/home/suppaionigiri/projects/player-just-works-tm-copy/out/node-tests.js:64:44)
    at /home/suppaionigiri/projects/player-just-works-tm-copy/out/node-tests.js:1588:1
    at Object.<anonymous> (/home/suppaionigiri/projects/player-just-works-tm-copy/out/node-tests.js:1628:3)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
===============================================
[:test] Build completed. (259 files, 197 compiled, 0 warnings, 4.70s)
Done in 12.54s.

Rei09:04:00

I'm way out of my depth at this point so any insights/suggestions would be highly appreciated!

thheller09:04:23

none of the targets will work directly without react-native tooling itself in the mix

thheller09:04:44

I have never actually used anything react-native, so I don't know how testing works there

thheller09:04:14

my guess is :npm-module or :esm is your best bet for compiling the tests and then running them via react-native

thheller09:04:53

better ask someone that actually uses react-native and shadow 😛

Rei09:04:11

Ok thanks for the direction. Let me play around and ask someone in the #fulcro channel then. Once I have some working example I may submit a patch to the user guide. Hope that's okay.

thheller09:04:02

I vaguely remember someone else asking about this some time ago, maybe you can find that

Rei10:04:20

@thheller I found https://clojurians.slack.com/archives/C6N245JGG/p1677092099756259 which is actually really helpful. I moved all of the react-native stuff out and just test the core fulcro functionality and it seems to be working as expected. But this is really limited tbh given that the main chunk of UI testing now cannot be worked on. I'll get back to this later but for now this seems to be "good enough".

Lidor Cohen10:04:18

Hi! Is there, by any chance, a known issue of:

Cannot add property closure_uid_104851320, object is not extensible
From react that appears on release (prod build)? P.S We're using react directly (createElement specifically)

thheller10:04:30

likely not related to react but what you are doing with its objects/classes maybe

thheller10:04:48

basically the gist is that this happens if you use goog.getUid(frozen_thing)

thheller10:04:15

so at some point do you extend any JS objects, for example with a hash function?

thheller10:04:51

(or trying to use created react elements as keys in a maps or values in a vector?)

thheller10:04:03

basically anything that wants to hash its values?

Lidor Cohen10:04:15

I'm definitely using goog.getUid I'll check my usage

thheller10:04:51

basically react calls Object.freeze on element values, so it can't add the uid to it

thheller10:04:20

Could also by js/Symbol since thats also not extensible

Lidor Cohen10:04:25

Also probably memoize on a function that takes react elements can cause that

thheller10:04:45

if its your own memoize function yes. React.memo works

Lidor Cohen10:04:09

Cljs' memoize

thheller10:04:44

that puts things in a map, so yes

thheller10:04:16

although if you are using createElement than you probably just found something that should absolutely never be memoized and used as a key 😛

thheller10:04:41

value is fine, but never as a key in a map, i.e. memoized function argument

Lidor Cohen10:04:30

Thanks @thheller 🙏:skin-tone-3: We'll hunt for those clues

hifumi12317:04:51

in my experience, ive ran into this problem when using raw refs directly. the objects returned by createRef/useRef are frozen and the docs dont warn about this; in particular when wrapping react, its easy to cause the error youve described (e.g. passing the value to satisfies to implement a protocol)

🙏 1
diego.videco22:04:20

Hello everyone, I am using rxjs which can be treeshaken, however at the moment it seems like it’s being completely included in my bundle. I see that the part of the docs that references tree shaking is under the “using external JS bundles” header. I thought that google Closure could do this kind of thing, so I just want to double check if I should instead follow this part of the docs, or if there’s some good way to achieve this. BTW, if it’s useful, I am always using rxjs like this rxjs/someOperator instead of requiring each individual operator.

thheller23:04:14

shadow-cljs and the closure compiler cannot do webpack-style tree shaking. :advanced is something else entirely and doesn't compare

thheller23:04:31

you can check a build report for why the whole bundle is getting included

thheller23:04:48

could be that its just not possible to include individual things

diego.videco01:04:45

thanks for the response!