使用 Jest 和 React Hooks Library 测试反应钩子状态答案

【问题标题】：Test react hooks state using Jest and React Hooks Library使用 Jest 和 React Hooks Library 测试反应钩子状态
【发布时间】：2020-01-21 21:30:07
【问题描述】：

然后我导航组件将在侧边栏中切换状态以及打开和关闭菜单，然后尝试在代码覆盖范围内获得此通过。当我登录我的测试时，我的状态一直显示为未定义。不知道如何在这里解决这个问题。

Component.js：

const Navigation = (props) => {
  const {
    classes,
    ...navProps
  } = props;

  const [anchorEl, setanchorEl] = useState(null);
  const [sidebarOpen, setsidebarOpen] = useState(false);

  const toggleSidebar = () => {
    setsidebarOpen(!sidebarOpen);
  };

  const toggleMenuClose = () => {
    setanchorEl(null);
  };

  const toggleMenuOpen = (event) => {
    setanchorEl(event.currentTarget);
  };

  return (
    <Fragment>
     <Button
          onClick={toggleMenuOpen}
        />
      <SideMenu
        toggleSidebar={toggleSidebar}
      >
       <Menu
          onClose={toggleMenuClose}
        >
      </SideMenu>
    </Fragment>
  );
};

export default Navigation;

Test.js：

import { renderHook, act } from '@testing-library/react-hooks';

// Components
import Navigation from './navigation';

test('sidebar should be closed by default', () => {
    const newProps = {
        valid: true,
        classes: {}
    };

    const { result } = renderHook(() => Navigation({ ...newProps }));
    expect(result.current.sidebarOpen).toBeFalsy();
});

【问题讨论】：

标签： reactjs testing react-hooks react-hooks-testing-library

【解决方案1】：

react-hooks-testing-library的作者在这里。

react-hooks-testing-library 不是用于测试组件和询问内部钩子状态以断言它们的值，而是用于测试自定义反应钩子并与钩子的结果进行交互以确保其行为符合您的预期。例如，如果您想提取类似于以下内容的 useMenuToggle 钩子：

export function useMenuToggle() {
  const [anchorEl, setanchorEl] = useState(null);
  const [sidebarOpen, setsidebarOpen] = useState(false);

  const toggleSidebar = () => {
    setsidebarOpen(!sidebarOpen);
  };

  const toggleMenuClose = () => {
    setanchorEl(null);
  };

  const toggleMenuOpen = (event) => {
    setanchorEl(event.currentTarget);
  };

  return {
    sidebarOpen,
    toggleSidebar,
    toggleMenuClose,
    toggleMenuOpen
  }
}

然后你可以用renderHook测试它：

import { renderHook, act } from '@testing-library/react-hooks';

// Hooks
import { useMenuToggle } from './navigation';

test('sidebar should be closed by default', () => {
    const newProps = {
        valid: true,
        classes: {}
    };

    const { result } = renderHook(() => useMenuToggle());
    expect(result.current.sidebarOpen).toBeFalsy();

    act(() => {
        result.current.toggleSidebar()
    })

    expect(result.current.sidebarOpen).toBeTruthy();
});

不过，一般来说，当挂钩仅由单个组件和/或在单个上下文中使用时，我们建议您简单地测试组件并允许通过它测试挂钩。

要测试您的Navigation 组件，您应该查看react-testing-library。

import React from 'react';
import { render } from '@testing-library/react';

// Components
import Navigation from './navigation';

test('sidebar should be closed by default', () => {
    const newProps = {
        valid: true,
        classes: {}
    };

    const { getByText } = render(<Navigation {...newProps} />);
    
    // the rest of the test
});

【讨论】：

谢谢迈克尔?