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>
    )
}
...

我正在尝试为＆＃34; getNumber＆＃34;写一个测试像这样：

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

使用Jest和Enzyme

1 个答案: