Grappig bespioneren van functionaliteit

Ik wissel naar Jest from Mocha en ik vraag me af of er een manier is om een React-methode te bespioneren. Laten we bijvoorbeeld zeggen dat ik de volgende methode in mijn component heb (negeer de sdk-bibliotheek, het maakt gewoon een jQuery Ajax-aanroep):

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

Met Sinon zou ik dit testen door het prototype als volgt te bespioneren:

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

Dit zou codedekking garanderen zonder de methode te bespotten. Is er vergelijkbare functionaliteit in Jest?

EDIT: En als deze functionaliteit niet bestaat, wat is dan de beste strategie voor het testen van API-aanroepen?


Antwoord 1, autoriteit 100%

Er is de spyOnmethode, die enkele dagen geleden met v19 werd geïntroduceerd, die precies doet wat u zoekt


Antwoord 2, autoriteit 99%

Eigenlijk kun je jest.spyOn jest.spyOn gebruiken

Als de methode wordt aangeroepen bij het maken van een component, gebruik dan:

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

Of als u het in uw DOM en methode hebt, gebruikt u Bind U kunt gebruiken:

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

Antwoord 3, Autoriteit 79%

U kunt gaan voor de nieuwe spyOn-methode of het volgende moet ook goed werken.

it('should call getData', () => {
    Component.prototype.getData = jest.fn(Component.prototype.getData);
    expect(Component.prototype.getData).toBeCalled();
});

Antwoord 4, Autoriteit 21%

Ik gebruik JEST met react 16.8 – dit werkte voor mij:

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

Gebruik ook:

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

Other episodes