Fork me on GitHub

would a tool like make sense for testing re-frame views?


actually got an answer for this after reading the testing section in re-frame documentation


we use react-testing-library at work and i enjoy it

👍 3

Hi, I'm having a really weird issue with Re-frame. Everything was working fine, and I don't know what I changed to make this happen, but when I click on a link on my site it doesn't change pages anymore. Has anyone had this issue before? The URL changes in the browser like there's an event.preventDefault() happening, and the value of my current page changes in my re-frame database, but then Reagent doesn't change the page


This is the code in question

;;; events.cljs
(re-frame/reg-event-db ::set-active-panel
 (fn-traced [db [_ active-panel]]
            (assoc db :active-panel active-panel)))

;;; subs.cljs
(re-frame/reg-sub ::active-panel
 (fn [db _]
   (:active-panel db)))

;;; routes.cljs
(defroute "/" []
  (re-frame/dispatch [::events/set-active-panel :login-panel]))

(defroute "/faq" []
  (re-frame/dispatch [::events/set-active-panel :faq-panel]))

(defroute "/alerts" []
  (re-frame/dispatch [::events/set-active-panel :alert-panel])) 
; ...

;;; sidebar.cljs
[:a.flnnc {:href "#/alerts" :style {:color "white"}} [FiAlertCircle] "Alerts"]
[:a.flnnc {:href "#/faq" :style {:color "white"}} [RiQuestionAnswerLine] "FAQ"]


You're conflating a few topics. Reagent has nothing to do with page changes. If the value in the app-db is changed but you don't see the result, then you simply aren't using that value in a correct way.


Here's how I'm using it

;;; views.cljs
(defn- panels [panel-name]
  (case panel-name
    :alert-panel   [li/template alert/alert-page]
    :faq-panel     [li/template faq/faq-page]
    ;; ...

(defn main-panel []
  (let [active-panel (re-frame/subscribe [::subs/active-panel])]
    (println @active-panel) ;; Here I can see the value changing
    [panels @active-panel])))
I don't see how I'm using it wrong. It's the same thing as the re-frame template, and it was working perfectly the other day. All I've changed since then was replacing some hard-coded string with translations from Tempura.


In addition, if I click a link, then change my code to allow a hot-reload to happen, the page changes fine.


How do you call main-panel?


The default code from the template

(defn ^:dev/after-load mount-root []
  (let [root-el (.getElementById js/document "app")]
    (rdom/unmount-component-at-node root-el)
    (rdom/render [views/main-panel] root-el)))


That all does look alright, so I can't really tell what's going on. If you create a repo with a minimal reproducible example then I can take a closer look.


In main-panel, try this:

^{:key (str "panel-" @active-panel)}
  [panel @active-panel]


That shouldn't affect anything because panel is a form-1 component. Also, you don't need to convert your keys into strings explicitly - Reagent does that for you.


Ahh, I found the issue, I had one extra (fn [] ...) in the component that my links were in. I'm not sure why it was causing the issue, but it was. Things appear to be working as expected now.


In this case, :key would've indeed helped (I think), but it would be an incorrect solution IMO just because the cause of the issue is something else entirely.