Wie spy componentWillMount mit Scherz-und Enzym -

Ich versuche zu testen, ob componentWillMount genannt wurde und für die, die mein test ist

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

Aber auch wenn die componentWillMount-Methode aufgerufen wird, wird der test nicht bestanden.
Was vermisse ich hier?

InformationsquelleAutor sidoshi | 2017-01-11

18

Ich weiß nicht, ob die anderen Antworten geholfen haben, mit Ihrer Frage, aber Sie sollten nicht brauchen, um zu testen componentWillMount. Reagieren sollte Sie schon tun, dass die Prüfung für Sie.

Mehr relevant für Ihre Prüfung wäre zum testen der Funktionen oder Aktionen, die Sie setzen sind, die Methode für die Komponente.

Wenn Sie einige API-Aufruf, ausgeführt wird eine Funktion basierend auf Requisiten oder irgendetwas anderes, das ist, was Sie sein sollten, testen für. Simulieren der Funktion/Aktion/code, dass componentWillMount löst, und stellen Behauptungen und Erwartungen auf, die.

Beispiel:

Komponente:
```
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'])
});
```
- können Sie erläutern, wenn die Funktion aufgerufen, in componentWillMount ist eigentlich ein Teil der Klasse selbst, wie: this.fetch('data'); ?
- this.prop.fetch('data') ist nur ein Beispiel. Für diese, ich sage nur das Sie eine Funktion aufrufen, übergeben YourComponent durch Requisiten. Also keine, die nicht Bestandteil der Klasse selbst. Man kann wirklich testen Sie für nichts, aber die zugrunde liegende Punkt hier ist, dass Sie nicht wirklich brauchen, um zu testen componentWillMount oder jede reagieren die lifecycle-Methoden. Reagieren/Facebook übernimmt das für Sie. Testen Sie einfach, dass der code, den Sie geschrieben haben, in denen die lifecycle-Methoden arbeitet.
- ja, ich verstehe. Sorry ich war nicht klar genug. Ich verstehe, wie alles zu testen innerhalb der lifecycle-Funktion, wenn Sie Funktionen, die übergeben wurden, über Requisiten. Aber was ist mit Funktionen, die zu der Komponente gehörenden? Wie würden Sie testen, dass die Funktion aufgerufen wurde und wie? Wenn this.props.fetch() wurde statt this.fetch() wie würden Sie testen, die innerhalb componentWillMount die Funktion this.fetch() wurde einige Male angerufen?
- Der einfache Weg wäre, gehen die BDD-für, dass, stellen Sie Behauptungen um die änderungen, die Methode machen soll. Wenn es verändert werden soll, die einen Teil der Benutzeroberfläche, können Sie Enzym ist mount Funktion, in der Erwartung, ein bestimmtes DOM-element/Komponente vorhanden/nicht vorhanden. Ansonsten würde ich flach wickeln Sie die Komponente und verwenden Sie wrapper.instance().yourMethod(your_arguments) testen, ob die Methode richtig handeln. Ich hoffe, jemand anderes kann hier in Glockenspiel auf, weil dies der beste Weg, ich kann denken, es zu tun.
- Bedeutet das, dass alles, was Sie tun, innerhalb dieser lifecycle-Methoden muss eine Funktion aufrufen? Zum Beispiel, wenn ich eine Auto-Klasse und auf componentDidMount ich will das Auto starten und shift das Getriebe, beide Aktionen sollten Funktionsaufrufe (startCar und shiftGear), sondern schreiben die Logik in der componentDidMount? Ist, dass ein faires Verständnis? Ich sehe, dass, wenn Sie mit Redux dies kann erreicht werden durch Verwendung von mapStateToProps und mapDispatchToProps und connect middleware.
- Sie können auch die .instance() wrapper-Methode von Enzym zu nennen, reagieren lifecycle-Methoden. So etwas wie wrapper.instance().componentDidMount() wird Ihnen erlauben, zu schreiben tests ohne Extraktion der Logik in anderen Funktionen. Ich habe das Gefühl, dass es sauberer und einfacher, mit zu arbeiten code, wenn die Logik gewonnen wird, aber das ist der Spaß an der Sache. Es ist bis zu Ihnen 🙂
InformationsquelleAutor scotthorn0

Versuchen Sie dies:

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

  expect(onWillMount).toBeCalled();
});

InformationsquelleAutor devellopah

Ich würde erstmal spy auf die Komponente componentWillMount Methode, sondern auch .and.CallThrough() zu verhindern, dass es Spott sein Inhalt. Hoffe, das hilft:

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

InformationsquelleAutor manosim

0

Ich glaube nicht, dass die obige Antwort die das Problem behebt. Die Scherz erlauben, Sie zu spyOn eine Methode, sondern ermöglicht es Ihnen nicht um callThrough bei der Spionage auf Ihren Anruf-status. Die Lösung funktionierte für mich am besten ist, um den setup-test mit einer Komponente componentWillMount definiert. Gelehnt auf den Scherz nur machen die Dinge komplizierter.

JS:
```
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)
  })
})
```
InformationsquelleAutor user2167582

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.