Question

当我看到间谍正确地“注入”到我的组件中时，我试图确定为什么没有确切地调用我的Jest间谍？这是我非常简单的示例：

TestComponent.js

export default class TestComponent extends Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event && event.preventDefault();
    console.log("handleSubmit called!");
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <button className="submit-button" type="submit">
          Submit
        </button>
      </form>
    );
  }
}

TestComponent.test.js

describe("TestComponent tests", () => {
  it("`handleSubmit` is called when form is submitted", () => {
    const wrapper = shallow(<TestComponent />);
    const spy = jest.spyOn(wrapper.instance(), "handleSubmit");

    wrapper.find("form").simulate("submit");

    expect(spy).toHaveBeenCalled();
  });
});

如果我在console.log上执行wrapper.instance().handleSubmit，则可以清楚地看到间谍已被注入到对象的属性中，但是我的测试仍然无法说明间谍没有被调用。

可在此处找到带有工作示例的CodeSandbox：https://codesandbox.io/s/3ymkp3w5x1

谢谢！

Answer 1

最佳实践不是测试handleSubmit被调用，而只是检查调用handleSubmit的结果。话虽如此...

问题

onSubmit在组件渲染时直接绑定到this.handleSubmit的值。

解决方案

使用lambda函数（请注意this might cause performance issues），以便onSubmit在被调用时调用this.handleSubmit的当前值：

<form onSubmit={() => this.handleSubmit()}>

为什么我看到的Jest间谍没有显示为被呼叫？

1 个答案:

问题

解决方案