Fork me on GitHub

What are the current suggested testing approaches for Reagent SPAs?


My recommendation is to unit test components/event handlers/other functions and at the most have one smoke test to validate that the app loads on browser or something similar.


And to be honest, I don't even test components or event handlers usually, but if I have some logic that I think is worth testing, I move the function to cljc namespace so I can easily test it using Clj test runner.


we do that ^ and have a few tests run on phantomjs too - because e.g. regex behave differently on js than jvm


For some libraries (like Reagent, reitit), I run tests on Node/Chrome headless with Doo also, but usually I haven't found that necessary with applications


I have an older project that ran tests in figwheel, and I really liked it. I assume I can still do that, but I don’t see docs for it on the official site.


@bhauman wrote code that would turn your browser tab favicon green or red based on the results of the test run, and it was great.


For reusable component library type projects, Figwheel + Devcards is nice


That’s a good idea, though, moving code to cljc and testing there.


testing is tricky


I think the most useful thing is the smoke test @juhoteperi mentioned


unfortunately it's also hard to build from an ops perspective


you need a db with mock data, a server running, you need to start and stop everything, and then there's the brittleness of selenium tests


lots of JS programmer test way too much IMO


unit-testing UI (or any non-algorithmic) code doesn't seem all that useful to me


I'd love to hear stories from people who have a setup they like (even in non-cljs environments)


I worked with setting up the test environment for the Norwegian BankID Client 2.0 which was a pure HTML/CSS/JS implementation where they had to test over 50 different combinations of hardware and browsers. Very brittle, lots of work when tests need to be rewritten, prone to breaking. There is value in it, and for something high profile like a BankID client I would argue there is a lot of value. It's incredibly expensive to set up and has a high upkeep cost


Is there any documentation on using React components written in JavaScript?


Oh awesome thanks. I see linked from GitHub project home-> tutorials and faq now. Looks like a lot of good stuff there


Any resources on this part? > Take, for example the react-flip-move library and assume that it has been properly imported as a React Component called FlipMove.


@alex-dixon The most reliable options are (1) import using a <script> tag, (2) import using :foreign-libs, (3) use the “double bundle” method with webpack, and (4) use shadow-cljs


shadow-cljs is the clear winner, but you will have to do a little bit of work if you are tightly integrated into a complex build process with lein or boot


this is the double bundle: and these are some notes I took earlier that really should be revised but they still have some examples:


The double bundle works like a charm for me.


okay i updated my gist on this stuff. should be a bit clearer. it’s helpful to keep in mind that packaging, access, and advanced compilation are all separate concerns. the webpack solution deals with the first two, but not the symbol munging issue. so you’ll either need to use cljs-oops or externs inference if you intend to compile in advanced mode


Good point, thanks!


@lee.justin.m wow thanks. Was not expecting this. Thank you!