测试 setState 调用 React 功能组件中箭头函数的返回答案

【问题标题】：Test return of arrow function in setState call React functional component测试 setState 调用 React 功能组件中箭头函数的返回
【发布时间】：2021-08-05 02:20:27
【问题描述】：

我正在尝试模拟 showAllElements 函数以查看我的 setElements 状态是否设置正确。这是反应 sn-p。

function functionalComponent(){
 const [elements, setElements] = React.useState([{"isHidden": true}]);
        
        
 function showAllElements() {
  setElements((elements) =>
   elements.map((element) => {
    element.isHidden = false;
    return element;
   })
  );
 }

 return (
  <SideBar
   showAllElements={showAllElements}
  />
}

这是我的笑话/酶 sn-p。但是，当我运行测试时，我得到的是 [Anonymous Function]，而不是字段 isHidden 设置为 false 的元素数组。

    it("Should set the field isHidden to false on all elements", async () => {
      Sidebar.invoke("showAllElements")();
      functionalComponent.update();
      expect(setElements).toHaveBeenCalledWith([{"isHidden": false}]);
    });

我正在使用 jest.fn() 模拟 setElements 这种方法适用于不使用箭头函数的 setState，例如这个。

    it("Open Sidebar", async () => {
      SideBar.invoke("setIsSideBarVisible")(true);
      actionMapper.update();
      expect(setIsSideBarVisible).toHaveBeenCalledWith(true);
    });

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

进一步阅读后，提出了两个选项，在提供程序中使用回调/创建挂钩与使用 redux。

我们选择继续使用 Redux，使用 reducer 来抽象这个逻辑，让 jest 可以在不使用任何匿名函数的情况下模拟所有内容。

【讨论】：