Question

我正在从mocha交换开玩笑，我想知道是否有办法窥探反应方法。例如，假设我的组件中有以下方法（忽略sdk库，它只构造一个jquery ajax调用）：

    getData() {
    sdk.getJSON('/someURL').done(data => {
        this.setState({data});
    });
}

使用sinon我会通过监视原型来测试这个：

 it('should call getData', () => {
        sinon.spy(Component.prototype, 'getData');
        mount(<Component />);
        expect(Component.prototype.getData.calledOnce).to.be.true;
    });

这样可以确保代码覆盖而不会模仿方法。在jest中有类似的功能吗？

编辑：此外，如果此功能不存在，那么测试API调用的下一个最佳策略是什么？

Answer 1

实际上你可以使用jest.spyOn jest.spyOn

如果在创建组件时调用方法：

import { mount } from 'enzyme'; 

describe('My component', () => {
  it('should call getData', () => {
    const spy = jest.spyOn(Component.prototype, 'getData');
    mount(<Component />);
    expect(Component.prototype.getData).toHaveBeenCalledTimes(1)
  });
})

或者如果你在DOM和方法中使用 bind ，你可以使用：

import { shallow } from 'enzyme'; 

describe('My component', () => {
  it('should call getData', () => {
    const wrapper = shallow(<Component />);
    const instance = wrapper.instance()
    const spy = jest.spyOn(instance, 'getData');
    wrapper.find('button').simulate('click')
    expect(spy).toHaveBeenCalledTimes(1)
  });
})

Answer 2

有几天前用v19引入的spyOn方法，它完全符合您的要求

Answer 3

我在React 16.8中使用Jest-这对我有用：

  it("lifecycle method should have been called", () => {
    jest.spyOn(RedirectingOverlay.prototype, 'componentWillUnmount');
    jest.spyOn(RedirectingOverlay.prototype, 'componentDidMount');
    const wrapper = mount(<RedirectingOverlay message="Hi There!"/>);
    expect(RedirectingOverlay.prototype.componentDidMount).toHaveBeenCalledTimes(1)
    wrapper.unmount()
    expect(RedirectingOverlay.prototype.componentWillUnmount).toHaveBeenCalledTimes(1)
  })

也使用：

"enzyme": "^3.6.0"
"jest": "23.5.0"
"enzyme-adapter-react-16": "^1.5.0"

Jest间谍功能

3 个答案: