Почему моя шутливая фиктивная функция не выполняется с фиктивным объектом при использовании энзимной функции "монтирования"?

Question

Следующая проблема:

У меня есть этот компонент:

const TodoHeader = ({ handleChange, handleSubmit }) => {
  return (
    <form onSubmit={e => handleSubmit(e)}>
      <input
        type="text"
        onChange={e => handleChange(e.target.value)}
        placeholder="your todo.."
      />
    </form>
  );
};

со следующим тестом:

it("should call the passed in handleSubmit function with the event object", () => {
    const handleSubmit = jest.fn();
    const wrapper = mount(<TodoHeader handleSubmit={handleSubmit} />);
    const form = wrapper.find("form");
    console.log(form.debug());
    const mockEvent = { target: {} };

    form.simulate("submit", mockEvent);

    expect(handleSubmit).toHaveBeenCalledWith(mockEvent);
    // Why does this work with shallow but not with mount?
  });

Это не удастся, потому что функция была вызвана сфактическое событие onSubmit.Хотя я издеваюсь над этим своим предметом.

Когда я делаю то же самое с shallow вместо mount, оно пройдет

Я не понимаю, почему.

Вот несколько кодов и ящик с тем же, что и для проверки.

https://codesandbox.io/s/72yl24j59q

Answer 1

Вам не нужно проверять, работает ли onSubmit с передаваемым вами объектом события - это будет тестирование самого React и браузера, который вас не касается.

Я обновил коды и полессылка, которую вы предоставили, и в соответствии с этим тестированием все тестовые примеры пройдены сейчас.

https://codesandbox.io/s/0op31650rp

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