входное значение ref в тесте фермента ожидается пустой строкой, но возвращает неопределенное - PullRequest
Новая
       6

входное значение ref в тесте фермента ожидается пустой строкой, но возвращает неопределенное

2 голосов
/ 20 марта 2020

Редактировать Вот кодовая песочница этого: https://codesandbox.io/s/react-typescript-bt34v

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

Я пытаюсь написать тест, который проверяет, как значение элемента input должно измениться после нажатия Button.

Вот функция, которая вызывается при нажатии компонента Button, stopTimer, который вызывает useReducer dispatch() для обновления состояния useReducer store, и ниже это выглядит как кнопка. 

  const stopTimer = (): void => {
    dispatch({
      payload: state.totalSeconds,
      type: 'stop',
    });

...

   <Button handleClick={ stopTimer } />

В другом файле это то, как выглядит useReducer, и ниже это useEffect, который вызывается при изменении store. Он обновляет значение ref до пустой строки '' при каждом обновлении store. 

  const [store, dispatch] = useReducer(reducer, dashboardStore);

...

  useEffect((): void => {
    ref.current!.value = '';
  }, [store]);

...

  <input ref={ref} type='text'></input>

Чтобы проверить это с помощью Enzyme, я монтирую родительский компонент <Dashboard /> и даю ввод начального значения 'hello'. Затем я вызываю кнопку handleClick для Button, которая должна вызывать функцию dispatch useReducer, обновляя store, а затем вызывая useEffect, что должно установить значение ввода в пустую строку.

Я ожидаю, что значение ввода будет пустой строкой после этого, но в итоге оно будет undefined.

Я также использую энзим debug(), чтобы попытаться проверить, как выглядит DOM разные времена. Когда я не вызываю handleClick для кнопки, или если я не вызываю wrapper.update(), значение входа равно 'hello', как ожидается, но debug() показывает, что вход не имеет value проп, после того, как update() называется. 

    it('should contain an empty string when the stop button is clicked', () => {
      const wrapper = mount(<Dashboard />);
      wrapper.find('input').props().value = 'hello';
      act(() => wrapper.find(Button).props().handleClick());

      wrapper.update();
      console.log(wrapper.find('input').debug());
      expect(wrapper.find('input').props().value).toBe('');
    });
...