开玩笑:单元测试到已经调用()不起作用

Question

我在 React 中有一个小组件，它在渲染时生成两个随机数，然后要求用户提交这些数字的总和，如果它们正确，则增加他们的分数。

以下代码处理此游戏并在浏览器中按预期工作：

import React, { Component } from 'react';
export const randomNumber = () => {
var maxNumber = 10;
var randomNumber = Math.floor((Math.random() * maxNumber) + 1);
return randomNumber;
}
class Arithmetic extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
numbers: {
x: randomNumber(),
y: randomNumber()
},
score: ''
}
this.updateVals = this.updateVals.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
updateVals() {
this.setState({
numbers: {
x: randomNumber(),
y: randomNumber()
},
score: this.state.score + 1
});
}
componentDidMount() {
this.setState({
score: 0
});
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
var isCorrect = this.state.numbers.x + this.state.numbers.y == this.state.value ? this.updateVals()  : alert("Try again");
event.preventDefault();
}
render() {
return (
<section className="arithmetic">
<div className="arithmetic__game">
<div className="row arithmetic__row--details">
<div className="arithmetic__score">
Score:&nbsp;&nbsp;{this.state.score}
</div>
<div className="arithmetic__timer">
</div>
</div>
<div className="row arithmetic__row--main">
<div className="arithmetic__examples">
1 + 1 = 2<br/>
2 + 1 = 3<br />
</div> 
<div className="arithmetic__game-container">
What is {this.state.numbers.x} + {this.state.numbers.y}?
<div className="arithmetic__form-container">
<form onSubmit={this.handleSubmit}>
<label>
Answer: &nbsp;&nbsp;
<input className="input-field" type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<button className="btn-submit" type="submit" onClick={(e) => (this.handleSubmit) ? this.handleSubmit(e) : null}>Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
);
}
};

但是，当尝试检查是否正确输入两个数字的总和时是否调用 updateVals 时，此操作将失败。我已经检查了是否在模拟单击"提交"按钮时调用了handleSubmit，并且它被调用了。我还检查了值和数字道具的值，以查看状态是否已正确更新，它们已经更新了。

但是，当调用 updateVals 时，分数会递增(同样，这显示在浏览器中(。但是当我尝试在 Jest 中模拟时，分数保持在 0，就像初始化时一样。

我的测试如下：

it("passes with correct input", () => {
const updateVals = jest.fn();
const handleSubmit = jest.fn();
Arithmetic.prototype.updateVals = updateVals;
Arithmetic.prototype.handleSubmit = handleSubmit;
let wrapper = mount(<Arithmetic />);
wrapper.find('.input-field').instance().value = wrapper.update().state().numbers.x + wrapper.update().state().numbers.y;
expect(wrapper.find('.input-field').instance().value).toEqual((wrapper.update().state().numbers.x + wrapper.update().state().numbers.y).toString());
wrapper.find('.input-field').simulate('change');
wrapper.find('.btn-submit').simulate('click');
console.log(wrapper.update().state().numbers.x, wrapper.update().state().numbers.y, wrapper.update().state().value);
expect(updateVals).toHaveBeenCalled();
});

在终端中运行测试表明，例如，如果 numbers.x 为1，而 numbers.y 为9，则状态中的值键为"10"。我不确定为什么当我测试 handleSubmit 时，它被调用并且测试通过，但 updateVals 没有。

Answer 1

我设法让它工作，我从提交按钮中删除了任何事件，并测试了已经调用 onSubmit 的表单本身，并测试了分数本身在状态中更新。

it("passes with correct input", () => {
const wrapper = shallow(<Arithmetic />);
const preventDefault = jest.fn();
const currentScore = wrapper.update().state().score;
wrapper.find('.input-field').simulate('change', {target: {value: wrapper.update().state().numbers.x + wrapper.update().state().numbers.y}});
wrapper.find('.main-form').simulate('submit', { preventDefault });
expect(wrapper.update().state().score).toEqual(currentScore+1);
});