用酶浅层测试 ReactJS 组件方法 - 函数返回 undefined 而不是 true答案

【问题标题】：Testing ReactJS component methods with enzyme shallow - function returns undefined instead of true用酶浅层测试 ReactJS 组件方法 - 函数返回 undefined 而不是 true
【发布时间】：2017-01-13 21:34:23
【问题描述】：

我有一个具有以下方法的组件，它通过 props 调用函数集：

    class OrderDish extends Component {
        static propTypes = {
            image: React.PropTypes.any,
            order: React.PropTypes.object.isRequired,
            removeFromOrder: React.PropTypes.func,
            addCommentToOrder: React.PropTypes.func,
            canOrder: React.PropTypes.bool
        };

    handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            this.props.addCommentToOrder(e.target.value, this.props.order, true);
        }
    };

    render() {
        const { order, canOrder } = this.props;
        return (
            <div className="Order-dish">
                <div className="Order">
                    <div className="Order-extra-info">
                        <TextField
                            className='Order-dish-comment'
                            ref="comment"
                            id={order.entry.type}
                            value={order.comment ? order.comment : ''}
                            onChange={this.handleCommentChange}
                            fullWidth
                            onKeyDown={this.handleKeyPress}
                            disabled={!canOrder}
                        />
                    </div>
                </div>
            </div>
        )
    }
}

export default OrderDish;

现在我要测试的第一件事是方法本身 - 如果我传入 key: 'Enter'，它会尝试调用 addCommentToOrder 属性吗？

所以我做了一个 mock function 和 jest 返回 true，并尝试将它作为道具传递，然后 call the method 看看会发生什么：

it('Test field should call handleKeyPress on key down', () => {
    const mockKeyPressFN = jest.fn(() => { return true; });
    let orderDish = shallow(<OrderDish order={mockOrder} addCommentToOrder={mockKeyPressFN}/>);
    expect(orderDish.instance().handleKeyPress({key: 'Enter', target: {value: 'mock'}})).toBe(true);
  });

但我的测试失败，输出如下：

expect(received).toBe(expected)

Expected value to be (using ===):
  true
Received:
  undefined

console.log(orderDish.instance());

将方法作为函数返回：

handleKeyPress: [Function]

这个：

console.log(orderDish.instance().handleKeyPress({key: 'Enter', target:{value: 'mock'}}));

不记录任何内容。

我做错了什么？

【问题讨论】：

如何导出组件？
添加了更多组件信息（仅显示相关的代码），以及底部的导出语句。它是导出默认 OrderDish；
代码看起来很合理。你是如何运行你的测试的？你有没有插入一些断点来查看？您是否考虑过模拟 keyDown 事件并以这种方式监视函数？
我通常只运行 npm jest 来运行测试。我认为我会尝试单独测试该方法，然后尝试在单独的测试中模拟该事件。我可以在 WebStorm 中尝试一些断点，但目前我认为该函数根本没有在实例上被调用。有没有办法让我检查实例返回的内容？
您可以使用 console.log(orderDish.instance())，也可以在 handleKeyPress 和 jest 函数中使用 console.log() 来查看是否调用了其中的任何一个。我使用 karma 运行单元测试，因此您可以在 chrome 中调试和设置断点，这非常方便

标签： reactjs jestjs enzyme

【解决方案1】：

expect(orderDish.instance().handleKeyPress({key: 'Enter', target: {value: 'mock'}})).toBe(true);

您正在测试 handleKeyPress() 的返回值，但该函数没有返回任何内容。

是 mockKeyPressFN 返回一个值，并且可能是您想要测试的。

您可以测试返回值，或它被调用的事实，或两者兼而有之 - https://facebook.github.io/jest/docs/mock-functions.html

例如：

expect(mockKeyPressFN.mock.calls.length).toBe(1);

【讨论】：