Проведите тестирование события клика с Jest и Enzyme

Question

У меня есть следующий метод рендеринга компонента React:

...
render() {
    const { n, operator, getNumber, getSign } = this.props
    return (
        <div>
            <Display val={n == "" ? null : n} />
            <Operator val={operator} />

            {/* NUMBERS */}
                <p data-n="1" onClick={this.getNumber}>1</p>
                <p data-n="2" onClick={this.getNumber}>2</p>
                <p data-n="3" onClick={this.getNumber}>3</p>

            {/* OPERATORS */}
                <p data-sign="+" onClick={this.getSign}>+</p>
                <p data-sign="-" onClick={this.getSign}>-</p>
                <p data-sign="/" onClick={this.getSign}>/</p>
                <p data-sign="*" onClick={this.getSign}>*</p>
                <p onClick={this.getTotal}>equal</p>
        </div>
    )
}
...

и я пытаюсь написать тест для "getNumber" следующим образом:

it('displays the typed digit on click', () => {
  const digit = 3,
    emptyState = [],
    action = {
      type: 'GET_RESULT',
      n: digit
    },
    p = shallow(<p data-n="3" onClick={showResult(emptyState, action)}>3</p>);

    p.simulate('click');
})

перед добавлением:

    p = shallow(<p data-n="3" onClick={showResult(emptyState, action)}>3</p>);

    p.simulate('click');

У меня было:

expect(showResult(emptyState, action)).toEqual([digit])

и тест проходил (я просто издевался над действием)

однако теперь у меня ошибка:

TypeError: handler.apply is not a function

Возможно, что-то не так в том, как я моделирую событие нажатия

Answer 1

Если это: expect(showResult(emptyState, action)).toEqual([digit]) работал правильно, то это означает, что showResult возвращает массив,

А здесь: p = shallow(<p data-n="3" onClick={showResult(emptyState, action)}>3</p>);, вы устанавливаете возвращаемый массив как обработчик кликов.

А внутри вашей функции render вы должны использовать getNumber, getSign вместо this.getNumber, this.getSign