Доступ к состоянию React Hooks с помощью Jest Unit Test - PullRequest
Новая
       21

Доступ к состоянию React Hooks с помощью Jest Unit Test

0 голосов
/ 20 сентября 2019

Я ищу способ проверить, правильно ли обновлено мое состояние в компоненте хуков.Компонент представляет собой простое выпадающее меню, которое открывается и закрывается при нажатии.

Я испробовал несколько различных способов монтажа компонента в моем тесте и использования функций шутки.Однако я не смог найти способ проверить, обновляет ли состояние.

У меня есть компонент Dropdown с функцией handleClick: 

const Dropdown = props => {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(prev => !prev);
  };

У меня есть кнопкав div, который при нажатии переключит состояние моего хука: 

<div>
          <Button
            className="classes.menuButton"
            onClick={handleClick}
            aria-label="menu"
          >
            <FontAwesomeIcon icon={faChevronDown} />
          </Button>
</div

Мой модульный тест пытается смонтировать компонент, смоделировать щелчок, а затем оценить состояние. 

it('clicking button toggles open', () => {
    let results;
    function HookWrapper(){
      results = Dropdown();
      return null;
     };
    mount(<HookWrapper />)
    // console.log(results.state)
    wrapper.find('button').simulate('click');
    // console.log(wrapper.find('button').debug())
    expect(results.open).toEqual(true)
  })

Я получаю сообщение об ошибке, сообщающее, что results.open не определен.Есть ли способ получить доступ к состоянию перехватчиков?Мне также интересно, было бы лучше превратить это в тест снимка.Сделайте снимок после нажатия кнопки и сравните.
Любая помощь будет оценена.

1 Ответ

0 голосов
/ 21 сентября 2019

Лучше не работать с состоянием в тесте, даже если вы можете.Есть несколько причин, давайте начнем с тех, что связаны с обслуживанием: любой отдельный рефакторинг (с функциональным компонентом, с подключением к редуксу, переносом с HOC, состоянием реструктуризации) может нарушить тесты, и это дорога в ад.Ты не хочешь этого.Кроме того, это сократит половину значений, которые приносят тесты (чувство уверенности при рефакторинге).

Поэтому установите реквизиты, запустите реквизиты обратного вызова на вложенных компонентах и ​​подтвердите результат рендеринга 

expect(wrapper.find(Paper)).toHaveLength(0);
wrapper.find(Button).prop("onClick")();
expect(wrapper.find(Paper)).toHaveLength(1);
wrapper.find(Button).prop("onClick")();
expect(wrapper.find(Paper)).toHaveLength(0);

Easy-peasy.

...