Wie componentWillMount mit Scherz auszuspionieren und Enzym

ich zu testen, ob ich versuche componentWillMount genannt wurde und für, dass mein TestWie componentWillMount mit Scherz auszuspionieren und Enzym

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

ist aber auch wenn die componentWillMount Methode aufgerufen wird, wird der Test nicht passieren. Was fehlt mir hier?

Quelle

2017-01-11 sidoshi

Ich weiß nicht, ob die anderen Antworten mit Ihrer Frage geholfen haben, aber Sie sollten nicht componentWillMount testen müssen. React sollte das bereits für Sie testen.

Relevanter für Ihre Tests wäre, die Funktionen oder Aktionen zu testen, die Sie in diese Methode für Ihre Komponente einfügen.

Wenn Sie einen API-Aufruf durchführen, eine Funktion ausführen, die auf Requisiten oder irgendetwas anderem basiert, sollten Sie testen. Verspotten Sie die Funktion/Aktion/Code, die componentWillMount auslöst, und machen Sie Behauptungen und Erwartungen dazu.

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

Quelle

2017-03-29 17:04:19 scotthorn0

könnten Sie das näher erläutern, wenn die Funktion innerhalb componentWillMount nannte sich tatsächlich ein Teil der Klasse ist, wie: 'this.fetch ('data');'? – nbkhope

'this.prop.fetch ('data')' ist nur ein Beispiel. Dafür rufe ich gerade eine Funktion auf, die über Props an "YourComponent" übergeben wird. Also nein, nicht Teil der Klasse selbst. Sie können wirklich alles testen, aber der grundlegende Punkt hier ist, dass Sie nicht wirklich 'componentWillMount' oder irgendeine der reaktiven Lebenszyklus-Methoden testen müssen. React/Facebook macht das für Sie. Testen Sie einfach, dass der Code, den Sie in diesen Lebenszyklusmethoden geschrieben haben, funktioniert. – scotthorn0

Ja, das verstehe ich. Tut mir leid, ich war nicht klar genug. Ich verstehe, wie man alles innerhalb der Lebenszyklusfunktion prüft, wenn es sich um Funktionen handelt, die über Requisiten übergeben wurden. Aber was ist mit Funktionen, die zu der Komponente gehören? Wie würden Sie testen, dass diese Funktion aufgerufen wurde und so? Wenn 'this.props.fetch()' stattdessen 'this.fetch()' wäre, wie würden Sie testen, dass innerhalb von 'componentWillMount' die Funktion' this.fetch() 'mehrmals aufgerufen wurde? – nbkhope

Ich würde zuerst spy auf der componentWillMount Methode der Komponente aber auch .and.CallThrough() verwenden, um zu verhindern, dass es seinen Inhalt verspottet. 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); 
});

Quelle

2017-01-15 00:29:15 manosim

Try this:

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

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

Quelle

2017-02-02 12:27:29

Ich glaube nicht, dass die oben genannte Antwort der Frage befasst. Which is jest erlaubt es Ihnen, eine Methode auszuspionieren, erlaubt Ihnen aber nicht, callThrough während des Ausspionierens seines Anrufstatus. Die Lösung, die am besten für mich funktioniert, ist, den Test mit einer Komponente einzurichten, die componentWillMount definiert hat. Sich auf den Scherz zu stützen wird die Dinge nur komplizierter machen.

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

Quelle

2017-07-14 16:36:07 user2167582

Wie componentWillMount mit Scherz auszuspionieren und Enzym

Antwort

Verwandte Themen