You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When the user calls setPizza, a new pizza object gets set globally. But the second instance of the hook usePizza(pizza => pizza.my.slice) does not re-render unless that "slice" of the global pizza object specifically changed. (In other words, if pizza.my.slice returns the same value as before ("slice22"), any component using that hook will not re-render.)
This property of not re-rendering unless necessary is a critical part of the hook. I want to test it. To do that, I need to do something like this:
const wrapper = (
... common context here (from Tanstack Query)
)
// for the moment, let's pretend I have methods `.toHaveRenderedOnce` and `.toHaveRenderedTwice`
test('it only re-renders a slice when it changes', () => {
const {result: fullPizza} = renderHook(() => usePizza(), {wrapper})
const {result: mySlice} = renderHook(() => usePizza(pizza => pizza.my.slice), {wrapper})
const {result: otherSlice} = renderHook(() => usePizza(pizza => pizza.other.slice), {wrapper})
const updatedPizza = { my: { slice: "slice22" }, other: { slice: "slice55" }}
const [pizza, setPizza] = fullPizza.current
setPizza(updatedPizza)
await waitFor(() => {
expect(fullPizza.current[0]).toEqual(updatedPizza)
})
// my slice did not change; it should render once
await waitFor(() => {
expect(mySlice.current[0]).toEqual("slice22")
expect(mySlice).toHaveRenderedOnce() // notional
})
// other slice changed; it should render twice
await waitFor(() => {
expect(otherSlice.current[0]).toEqual("slice55")
expect(mySlice).toHaveRenderedTwice() // notional
})
})
There are (at least) two problems here. The first is that there's no way to check how many times the hook rendered, but that's a different problem (for which I may have a rudimentary solution).
The second problem, and the subject of this issue, is that it seems that the wrapper context is not shared between my two hooks. This line does not work:
await waitFor(() => {
expect(otherSlice.current[0]).toEqual("slice55")
})
// this value is never picked up when I change it in the other hook
So, even though the wrapper itself is the same instance, the two hooks don't seem to be sharing the same React context. I can do this instead:
This solves the wrapper issue; changes in usePizza() are reflected in the other slice (usePizza(pizza => pizza.other.slice)). But unfortunately now all three instances of the hook are rendered in tandem, so they always all have the same number of renders. I can't verify that usePizza(pizza => pizza.my.slice) doesn't re-render.
I suppose it makes sense that the context is isolated between different calls to renderHook, or we might leak state in between tests. But then how can I test this functionality? Is there a way using this library to test that a change inside one hook instance either does or does not trigger an update/re-render in another related hook instance?
Hi! I’d like to work on this issue. I’ll start investigating it and provide a fix soon. Let me know if there are any suggestions or guidelines I should follow.
Thanks for sharing the cleanup solution! I'll investigate further and work on a fix. I'll submit a PR soon—let me know if you have any additional feedback.
I have a hook that does some complicated things with state1. Specifically, it works like this:
When the user calls
setPizza
, a new pizza object gets set globally. But the second instance of the hookusePizza(pizza => pizza.my.slice)
does not re-render unless that "slice" of the global pizza object specifically changed. (In other words, ifpizza.my.slice
returns the same value as before ("slice22"), any component using that hook will not re-render.)This property of not re-rendering unless necessary is a critical part of the hook. I want to test it. To do that, I need to do something like this:
There are (at least) two problems here. The first is that there's no way to check how many times the hook rendered, but that's a different problem (for which I may have a rudimentary solution).
The second problem, and the subject of this issue, is that it seems that the wrapper context is not shared between my two hooks. This line does not work:
So, even though the wrapper itself is the same instance, the two hooks don't seem to be sharing the same React context. I can do this instead:
This solves the wrapper issue; changes in
usePizza()
are reflected in the other slice (usePizza(pizza => pizza.other.slice)
). But unfortunately now all three instances of the hook are rendered in tandem, so they always all have the same number of renders. I can't verify thatusePizza(pizza => pizza.my.slice)
doesn't re-render.I suppose it makes sense that the context is isolated between different calls to
renderHook
, or we might leak state in between tests. But then how can I test this functionality? Is there a way using this library to test that a change inside one hook instance either does or does not trigger an update/re-render in another related hook instance?Footnotes
Specifically, I'm using Tanstack Query's
select
data transformation, similar to the idea of useContextSelector. ↩The text was updated successfully, but these errors were encountered: