Блог

У меня есть компонент, который отображает ввод с помощью элементов управления. Элементы управления действуют как добавление / уменьшение значения на 1. У меня input с onKeyDown={handleKeyDown}

 const addUp = () => {
    let next = value   1;
    if (next > max) {
        next = max;
    }
    setValue(next);
    onChange(next);
};

const minusDown = () => {
    let next = value - 1;
    if (next < min) {
        next = min;
    }
    setValue(next);
    onChange(next);
};


function handleKeyDown() {
    const input = event.currentTarget;
    switch (event.key) {
        case "ArrowUp":
            addUp();
            break;
        case "ArrowDown":
            minusDown();
            break;
    }
    event.preventDefault();
}
 

Я хочу издеваться над handleKeyDown выше. Вот что я пробовал до сих пор:

   let defaultProps: Props;
  beforeEach(() => {
      defaultProps = {
          max: 100,
          min: 1,
          onChange: noop,
          value: 10,
      };
  });



describe("controls", () => {
    it("should call addUp and increase value", () => {
        const addUp = jest.fn();
        const wrapper = mount(<MyComponent {...defaultProps} />);
        const input = wrapper.find("input");
        input.simulate("keydown", { key: "ArrowUp", keyCode: 38, preventDefault() {}, which: 38 });

        expect(addUp).toBeCalledTimes(1);
        expect(input.prop("value")).toBe(11);
    });
});
 

это ошибка, которую я получаю:

 expect(jest.fn()).toBeCalledTimes(expected)

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

У кого-нибудь есть какие-либо предложения о том, как это сделать правильно?

По .simulate() словам сопровождающих проекта, метод фактически устарел.

Предлагаемое решение состоит в том, чтобы использовать обработчики prop экземпляра компонента, которые будут запускать эти события; в данном случае это было бы wrapper.props().onKeyDown() . Это следует использовать вместо .simulate() .