reagent 2020-05-11 | Slack Archive

Eliraz11:05:14

anyone tried the new `functional-compiler` of reagent? how would I know that Reagent actually creating function components and not Class components? I mean how can I see the React code that comes out ?

Eliraz11:05:01

Also, using the new functional-compiler how would you use third party libraries? it's all the same as it was?

schaueho13:05:41

I'm trying to use react-testing-library with shadow-cljs and am wondering if I should target the :browser-test or :node-test for it. I mean in the React world, jest is obviously not targeting the browser ...

Vishal Gautam13:05:54

It should be :karma . Here is a build config that I recently used to solve the same problem.

:karma-test
          {:target    :karma
           :output-to "out/karma/test.js"
           :output-dir "out/karma"
           :source-path "karma"
           :compiler-options {:infer-externs :auto}
           :ns-regexp "-test$"}}}

Vishal Gautam13:05:17

Please go through this - https://shadow-cljs.github.io/docs/UsersGuide.html#target-karma

schaueho13:05:27

Hmm. I'm under the impression that using Karma actually also involves launching a browser to run the tests. If possible, I would like to avoid this.

Vishal Gautam14:05:36

Nope, you can run in headless mode

thheller14:05:03

I'm not sure how react-testing-library works but if its meant to run in node then :node-test should be fine

lilactown16:05:14

react-testing-library does expect to use the DOM; so you’ll want to run it either in a browser context (using :browser-test for local dev and :karma for CI) or in :node-test and provide a DOM polyfill like jsdom: https://github.com/jsdom/jsdom

schaueho08:05:27

Well, when I try to run it in a browser context, a basic test I ran apparently gets confused with the generated result page, so I was mostly thinking about using it with jsdom. I'll give karma a shot first, though and see if that just works.

schaueho08:05:36

Thanks everybody for the input.

schaueho12:05:51

And of course it turns out that not react-testing-library was confused but my test and it works as a browser-test just fine.

Mark Wardle21:05:12

I'm sorry if this is such a newbie question, but if I wanted to reagent-ify a google closure component such as DatePicker, how would I do so? I've tried copying the technique in https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md but I get an error react_devtools_backend.js:6 error when calling lifecycle function pc-ward.core/mount-root TypeError: this.getBaseCssClass is not a function at goog.ui.DatePicker (datepicker.js:105) I probably need to learn react and javascript before trying to convert JS examples into cljs! All tips appreciated thank you.

lilactown21:05:39

@mark354 a google closure component has nothing to do with react, so you’re going to struggle a lot trying to use anything in that document with https://google.github.io/closure-library/api/goog.ui.DatePicker.html

Mark Wardle10:05:45

Ah I see. Thank you. I assumed the reagent macro did all of the js getElementById and render for an arbitrary component. So essentially I have to create a reagent “form 3” type and run getElementById and render from there into the DOM fragment? Thanks I’ll give this a try.

2020-05-11

Channels