Проверьте состояние перехватчиков с помощью библиотеки Jest и React Hooks

Question

Затем компонент навигации будет переключать состояние на боковой панели, а также открывать и закрывать меню, а затем пытаться получить этот проход в покрытии кода. Когда я вхожу в свой тест, мое состояние продолжает отображаться как неопределенное. Не уверен, как справиться с этим здесь.

Компонент. 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;

Тест. 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();
});

Answer 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
});