Как проверить реакцию крючков с ферментом - PullRequest
Новая
       60

Как проверить реакцию крючков с ферментом

0 голосов
/ 17 февраля 2020

Я столкнулся с проблемой во время процесса TDD, и состояние перехватчиков реакции не изменилось, как ожидалось

// Header.tsx 

import React, { useState, ChangeEvent, KeyboardEvent } from 'react';

interface Props {
  addUndoItem: (item: string) => void;
}

function Header(props: Props) {
  const [value, setValue] = useState('');

  const handleChange = (e: ChangeEvent<{ value: string }>) => {
    setValue(e.target.value);
  };

  const handleKeyUp = (e: KeyboardEvent) => {
    if (value && e.keyCode === 13) {
      props.addUndoItem(value);
    }
  };

  return (
    <div>
      <input
        onChange={handleChange}
        onKeyUp={handleKeyUp}
        value={value}
        data-test="input"
      />
    </div>
  );
}

// тесты / Header.tsx 

it('the fn may invoked when press enter', () => {
      const userInput = 'test';
      const fn = jest.fn();
      const wrapper = shallow(<Header addUndoItem={fn} />);
      const inputEle = wrapper.find('[data-test="input"]');

      inputEle.simulate('change', {
        target: {
          value: userInput
        }
      });

      inputEle.simulate('keyUp', {
        keyCode: 13
      });
      expect(fn).toHaveBeenCalled();
      expect(fn).toHaveBeenCalledWith(userInput);
    });

когда exe c имитирует изменение, значение в хуках Header по-прежнему '', оно должно быть test, оно успешно выполняется в браузере

ошибка

ожидаемая (jest.fn ()). ToHaveBeenCalled () 

Expected number of calls: >= 1
Received number of calls:    0

  48 |         keyCode: 13
  49 |       });
> 50 |       expect(fn).toHaveBeenCalled();
     |                  ^
  51 |       expect(fn).toHaveBeenCalledWith(userInput);
  52 |     });
  53 |

1 Ответ

0 голосов
/ 17 февраля 2020

Вам нужно использовать mount вместо shallow, иначе ваш input компонент не будет правильно отображен и, следовательно, не будет использоваться во время теста.

...