Nicht in der Lage ComponentWillMount ComponentWillMount Komponente Methode zu testen

Question

Ich habe eine Komponente namens App und innerhalb dieser Komponente habe ich eine Methode namens fetchContent. Diese Methode wird in meiner componentWillMount-Methode aufgerufen, und ich versuche zu überprüfen, ob sie tatsächlich beim Mounten meiner Komponente aufgerufen wird. Im Folgenden finden Sie meine Methode:

export default class App extends Component { 
    fetchContent = (current) => { 
    ...do some stuff in here 
    } 

    componentWillMount() { 
    this.fetchContent('techcrunch'); 
    } 

Wie Sie sehen, ich bin mit einem Pfeil Funktion, anstatt es auf die Komponente in meinem Konstruktor zu binden. Ich muss es binden, weil es auch eine Methode ist, die für ein Klickereignis aufgerufen wird.

Allerdings, wenn ich versuche, meinen Unit-Test in dieser Komponente zu laufen, kann ich nicht meinen Spion/Stub bekommen, zu arbeiten, weil es einen Fehler wirft sagen:

TypeError: Attempted to wrap undefined property fetchContent as function

Unter meiner Einheit ist test:

it('should fetch the content when component mounts',() => { 
    sinon.spy(App.prototype, 'fetchContent'); 
    wrapper = mount(<App />); 
    expect(wrapper.instance().fetchContent).to.have.been.calledOnce; 
}); 

Wenn meine Methode jedoch nicht gebunden ist oder keine Pfeilfunktion verwendet, funktioniert es einwandfrei.

Irgendwelche Ideen, wie man es erreicht?

Answer 1

Nun, ich brauche 50 rep auf stackoverflow zu kommentieren, so dass dies nicht Ihre eigentliche Frage beantworten, warum es nicht stub.

Wie auch immer, angesichts dieser Situation, wenn ich Sie wäre, würde ich nicht die tatsächliche Implementierung, this.fetchContent stub, sondern testen, was die Eigenschaft tut.

So ein Beispiel, wenn fetchContent waren, so etwas zu tun:

fetchContent = (current) => { 
    this.setState({foo: current}); 
} 

Ich würde dann das state.foo testen hat, was Sie in fetchContent übergeben, wenn die Komponentenhalterungen.

Answer 2

Wenn das Ziel ist, dass entsprechende Funktionsaufrufe als Nebenwirkung einer anderen Funktion auftreten zu machen, ich mag es so nähern:

const wrapper = shallow(<App />) 
const component = wrapper.instance() 

// either 
sinon.spy(component, 'fetchContent'); 
expect(wrapper.instance().fetchContent).to.have.been.calledOnce; 

// or 
const restore   = component.fetchContent 
component.fetchContent = jest.fn() 
const mock    = component.fetchContent 

component.componentWillMount() 

expect(mock).toHaveBeenCalled() 
container.fetchContent = restore 

Statt enzyme.mount zu verwenden, können Sie einfach testen, um die Nebenwirkungen von componentWillMount und vertrauen Sie darauf, dass React seinen Job ausführt, um die Lebenszyklusmethoden entsprechend zu feuern.