Reactjs 测试React组件已更新上下文

测试组件是否已更新其父上下文的正确方法是什么

根据下面的示例，单击

MsgSender

后，如何验证

MsgReader

是否已更新

从“React”导入React
从'@testing library/react'导入{render，act，firevent}
const MsgReader=React.createContext（）
const MsgWriter=React.createContext（）
const MsgProvider=（{init，children}）=>{
const[state，setState]=React.useState（init）
返回(
{儿童}
)
}
常量MsgSender=（{value}）=>{
常量writer=React.useContext（MsgWriter）
返回(
写入程序（值）}>
增量
)
}
描述（'测试组件'，（）=>{
它（'单击更新上下文'，异步（）=>{
常量{getByRole}=render(
,
)
const button=getByRole（'按钮'）
等待动作（异步（）=>fireEvent.click（按钮））
//->期望（？？？）.toBe（2）
})
})

我想出的最干净的方法是手动设置

*.Providers

，但我想知道这是否是一种错误的方法

it('click updates context with overrides', async () => {
  let state = 1
  const setState = (value) => {
    state = value
  }

  const { getByRole } = render(
    <MsgReader.Provider value={state}>
      <MsgWriter.Provider value={setState}>
        <MsgSender value={2} />
      </MsgWriter.Provider>
    </MsgReader.Provider>,
  )
  const button = getByRole('button')

  expect(state).toBe(1)
  await act(async () => fireEvent.click(button))
  expect(state).toBe(2)
})

it（'click updates context with overrides'，async（）=>{
让状态=1
常量设置状态=（值）=>{
状态=值
}
常量{getByRole}=render(
,
)
const button=getByRole（'按钮'）
expect（state）.toBe（1）
等待动作（异步（）=>fireEvent.click（按钮））
期望（状态）。托比（2）
})

您需要创建一个

customRender

，它使您能够断言

状态，如下所示：


function customRender(ui, { init, ...options }) {
  const [state, setState] = React.useState(init);

  function wrapper({ children }) {
    return (
      <MsgReader.Provider value={state}>
        <MsgWriter.Provider value={setState}>{children}</MsgWriter.Provider>
      </MsgReader.Provider>
    );
  }

  return {
    ...render(ui, { wrapper, ...options }),
    state,
  };
}

describe("Test <MsgSender> component", () => {
  it("click updates context", async () => {
    const { getByRole, state } = customRender(<MsgSender value={2} />);

    const button = getByRole("button");
    await act(async () => fireEvent.click(button));

    expect(state).toBe(2)
  });
});


函数customRender（ui，{init，…options}）{
const[state，setState]=React.useState（init）；
函数包装器（{children}）{
返回(
{儿童}
);
}
返回{
…呈现（ui，{wrapper，…options}），
国家,，
};
}
描述（“测试组件”，（）=>{
它（“单击更新上下文”，异步（）=>{
const{getByRole，state}=customRender（）；
const button=getByRole（“按钮”）；
等待act（异步（）=>fireEvent.click（按钮））；
期望（状态）。托比（2）
});
});
如果答案有帮助，试着接受答案谢谢，但是您的示例抛出了无效的钩子调用。钩子只能在函数组件的主体内部调用。

当我尝试运行它时。@kgreen是的，你说得对，我没有想到这一点