web-dev-qa-db-fra.com

Blague espion sur la fonctionnalité

J'échange pour plaisanter de moka, et je me demande s'il existe un moyen d'espionner une méthode de réaction. Par exemple, disons que j'ai la méthode suivante dans mon composant (Ignore la bibliothèque sdk, elle construit simplement un appel jquery ajax):

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

En utilisant sinon je testerais cela en espionnant le prototype comme suit:

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

cela assurerait une couverture de code sans se moquer de la méthode. Y a-t-il une fonctionnalité similaire en plaisanterie?

EDIT: De plus, si cette fonctionnalité n’existe pas, quelle est la meilleure stratégie pour tester les appels d’API?

javascriptreactjsjestjs
29
Jake

Il y a la méthode spyOn , introduite avec v19 il y a quelques jours, qui fait exactement ce que vous recherchez

17
Andreas Köberle

En fait, vous pouvez utiliser jest.spyOn jest.spyOn

Si la méthode est appelée lors de la création du composant, utilisez:

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

ou si vous l'avez dans votre DOM et dans votre méthode, utilisez 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)
  });
})
25
Denis Rybalka

Vous pouvez choisir la nouvelle méthode spyOn ou les suivantes devraient également fonctionner correctement.

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

J'utilise Jest avec React 16.8 - Cela a fonctionné pour moi:

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

En utilisant également:

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