web-dev-qa-db-fra.com

Comment espionner composantWillMount en utilisant plaisanterie et enzyme

J'essaie de tester si composantWillMount a été appelé et pour cela mon test est

test('calls `componentWillMount` before rendering', () => {
  let fn = jest.fn(SomeComponent.prototype.componentWillMount)
  mount(<SomeComponent />)
  expect(fn).toHaveBeenCalled()
})

Mais même si la méthode composantWillMount est appelée, le test ne réussit pas… .. Que me manque-t-il ici?

unit-testingreactjsjestjsenzyme
8
sidoshi

Je ne sais pas si les autres réponses vous ont aidé dans votre question, mais vous ne devriez pas avoir besoin de tester composantWillMount. React devrait déjà faire ce test pour vous. 

Plus pertinent pour vos tests serait de tester les fonctions ou actions que vous mettez dans cette méthode pour votre composant. 

Si vous passez un appel API, exécutez une fonction basée sur des accessoires, ou autre chose, vous devriez le tester. Simulez la fonction/action/code déclenchée par componentWillMount et faites des affirmations et des attentes à ce sujet. 

Exemple: 

Composant:

class YourComponent extends Component {

  componentWillMount() {
    /*this fetch function is actually what you want to test*/
    this.props.fetch('data')
  }

  render() {
    /* whatever your component renders*/ 
  }    
}

Tests:

test('should call fetch when mounted', () => {
  let mockFetch = jest.fn()

  const wrapper = mount(<SomeComponent fetch={mockFetch}/>);

  expect(wrapper).toBeDefined();
  expect(mockFetch).toHaveBeenCalled();
  expect(mockFetch.mock.calls[0]).toEqual(['data'])
});
17
scotthorn0

Essaye ça:

test('calls `componentWillMount` before rendering', () => {
  const onWillMount = jest.fn();
  SomeComponent.prototype.componentWillMount = onWillMount;
  mount(<SomeComponent />);

  expect(onWillMount).toBeCalled();
});
2
Islam Ibakaev

Je voudrais d'abord spy utiliser la méthode componentWillMount du composant, mais aussi utiliser .and.CallThrough() pour l'empêcher de se moquer de son contenu. J'espère que cela t'aides:

it('should check that the componentWillMount method is getting called', () => {
    spyOn(SomeComponent.prototype, 'componentWillMount').and.callThrough();

    const wrapper = mount(<SomeComponent />);

    expect(wrapper).toBeDefined();
    expect(SomeComponent.prototype.componentWillMount).toHaveBeenCalledTimes(1);
});
2
manosim

Je ne crois pas que la réponse ci-dessus aborde le problème. Ce qui est plaisanter vous permet d'espionner une méthode mais ne vous autorise pas à callThrough tout en espionnant son statut d'appel. La solution qui a fonctionné le mieux pour moi consiste à configurer le test avec un composant pour lequel componentWillMount est défini. Se pencher sur la plaisanterie ne fera que rendre les choses plus compliquées.

describe('componentWillMount', () => {
  const calls = []
  class Component1 extends Components {
    componentWillMount() {
      calls.Push(new Date)
    }
    render() { ... }
  }
  
  afterEach(() => calls.splice(0, calls.length))
  it('has been called', () => {
    mount(<Component1 />)
    expect(calls.length).toBe(1)
  })
})

0
user2167582