Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

wrapper context is not shared with `renderHook`

未关闭
  • 哪里不对？
#1,344 4 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

@Lucatonello 已经在做这个了。

开始于 2024年12月2日。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
javascript, react
领域
frontend, testing

调研方向

从 issue 中展示的 renderHook 包装器行为和 waitFor 断言开始。跟踪各个独立的 renderHook 调用如何挂载其包装器，然后将其与包含多个 hook 函数的单个 renderHook 调用进行比较。完成后应建立一种受支持的方式，以独立测试相关的 hook 实例，或记录该限制以及推荐的测试方法。

由索引模型根据 Issue 内容生成。

描述

I have a hook that does some complicated things with state[^1]. Specifically, it works like this:

const [pizza, setPizza] = usePizza()
console.log(pizza)
// { my: { slice: "slice22" }, other: { slice: "slice19" } }

const [slice] = usePizza(pizza => pizza.my.slice)
console.log(slice)
// "slice22"

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:

const {result} = renderHook(() => [
  () => usePizza(),
  () => usePizza(pizza => pizza.my.slice),
  () => usePizza(pizza => pizza.other.slice)
], {wrapper})

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?

[^1]: Specifically, I'm using Tanstack Query's select data transformation, similar to the idea of useContextSelector.

主要语言
JavaScript
星标
19.7k
派生
1.2k
30 天内没有已合并 PR

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

testing-library/react-testing-library 的其他 Issue

查看 testing-library/react-testing-library 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。