具有useContext的React组件具有``未包装在act...中''警告

如何解决具有useContext的React组件具有``未包装在act...中''警告

我在React应用程序中有一个页面，其工作方式如下（尝试不转储大量代码）：

1. 单击列表中的项目
2. 打开侧面板，显示该项目的详细信息
3. 在该侧面板中，设置商品的名称和价格，然后按保存（使用钩子和useContext将其保存在状态中）
4. 如果为空白或无效，则显示错误

首先，测试项目具有有效价格。输入空白价格的测试通过：

it("should show an error and not fire the callback when you try and save a blank price",() => {
  clickFirstItem(wrapper);
  setFirstPrice(wrapper,"");                             // set the price to blank
  expect(wrapper.find(".alert-danger").length).toBe(0);
  wrapper.find(".btn-primary").simulate("click");
  expect(wrapper.find(".alert-danger").length).toBe(1);
  expect(onSave).not.toHaveBeenCalled();
});

但是输入无效价格的测试失败，并发出警告：“警告：测试内部对Services的更新未包含在act（...）中”：

it("should show an error and not fire the callback when you try and save an invalid price","xxx");
  expect(wrapper.find(".alert-danger").length).toBe(0);
  wrapper.find(".btn-primary").simulate("click");
  expect(wrapper.find(".alert-danger").length).toBe(1);   // this is failing
  expect(onSave).not.toHaveBeenCalled();
});

是的，当我将价格设置为“ xxx”时，我确定我的组件显示错误。

我尝试使用act() as described on the React site，但是它仍然失败，并发出'act'警告：

it("should show an error and not fire the callback when you try and save an invalid price",() => {
  let container = document.createElement("div");
  document.body.appendChild(container);

  act(() => {
    ReactDOM.render(<ProductsPage items={itemsData} onSave={onSave} />,container);
  });

  container.querySelector("table tbody tr:first-of-type").dispatchEvent(new MouseEvent("click",{ bubbles: true }));
  expect(container.querySelectorAll(".alert-danger").length).toBe(0);

  act(() => {
    container.querySelectorAll("input[type='text']")[0].value = "xxx";
  });

  container.querySelector(".btn-primary").dispatchEvent(new MouseEvent("click",{ bubbles: true }));
  expect(container.querySelectorAll(".alert-danger").length).toBe(1); // this is failing

  document.body.removeChild(container);
  container = null;
});

尝试将更多代码包装在act中以消除该错误会导致其他问题。

感谢您的帮助。