Testen Sie eine Funktion, die eine API aufruft

Ich muss die fetchData() Funktion testen. Ich habe versucht, this (und viele andere) Tutorials zu folgen und zu versuchen, es mit meiner Funktion für die letzten 3 Stunden zu arbeiten, aber bisher kein Glück. Ich würde es sowieso lieber anders machen, weil ich nicht glaube, dass jQuery und React zusammen verwendet werden sollten.Testen Sie eine Funktion, die eine API aufruft

Ich möchte im Wesentlichen überprüfen, ob 1) die Funktion aufgerufen wird, wenn das Suchformular abgeschickt wurde (Schaltfläche in SearchForm geklickt) und 2) überprüfe, ob die Daten zurückkommen.

Hat jemand irgendwelche Vorschläge, wie man bitte beginnt?

Dank

Startseite

export default class Home extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: '', 
     loading: false, 
     dataError: false 
    } 
    this.nodes = []; 
    this.fetchData = this.fetchData.bind(this); 

    } 
    fetchData(e) { 
    e.preventDefault(); 
    this.setState({loading: true}); 
    axios.get(`https://api.github.com/search/repositories?q=${this.state.value}`) 
    .then(res => { 
     this.nodes = res.data.items.map((d, k) => <RepoItem {...d} key={k}/>); 
     this.setState({loading: false}); 
    }) 
    .catch(err => { 
     this.setState({dataError: true}); 
    }); 
    } 
    render() { 
    return (
     <div className="home-wrapper"> 
     <SearchForm value={this.state.value} 
        onSubmit={this.fetchData} 
        onChange={(e) => this.setState({value: e.target.value})}/> 
     {this.state.loading ? 
     <Spinner/>: 
     !this.state.dataError ? this.nodes : 
     <h1>Oops! Something went wrong, please try again!</h1>} 
     </div> 
    ); 
    } 
}

RepoItem

export const RepoItem = props => (
    <div className="repo-item"> 
    <h1>{props.full_name}</h1> 
    </div>);

Quelle

2017-02-20 Apswak

Nicht sicher über das Testen von Teil, aber Sie möchten wahrscheinlich 'dies' an Ihre fetchData-Funktion binden, so dass this.setState innerhalb davon bezieht sich auf Home-Komponente. – Mateusz

edit: nvm Ich hatte es bereits, ich habe nur ein paar der Linien entfernt, um die Komponente zu täuschen. Trotzdem danke! – Apswak

Hmmm nicht sicher, warum es funktioniert, aber im Grunde, wenn Sie dies innerhalb Ihrer Funktion beziehen, und dann an eine andere Komponente weitergeben, ohne 'dieses' (SearchForm in Ihrem Beispiel) zu binden, bezieht sich 'this' auf diese Komponente, wenn sie aufgerufen wird Aktualisiere den Status in SearchForm anstelle von Home. In Ihrem Beispiel verwenden Sie die Pfeilfunktion für das Ereignis onChange, das sich automatisch an die Home-Komponente bindet, sodass this.setState ({value: e.target.value} den Status in Ihrer Home-Komponente ordnungsgemäß aktualisiert. – Mateusz

zu überprüfen, um, wenn die Funktion auf Formular-Vorlage aufgerufen wird, können Sie Flach machen die <SearchForm> Komponente mit der spy Funktion weitergegeben als onSubmit Prop. Simulieren Sie das submit Ereignis und überprüfen Sie, ob die spy-Funktion aufgerufen wird.
Um zu überprüfen, ob die Daten zurückkommen, spottet der Axios-Dienst. Sie können this library verwenden, um Axios-Aufrufe nachzuahmen. Rufen Sie die fetchData() und sehen Sie, ob die this.nodes und State korrekt aktualisiert werden.
```
const wrapper = shallow(<Home />); 
wrapper.instance().fetchData().then(() => { 
    ... your assertions go here ... 
}) 
```

Ich denke, es ist immer die beste Praxis ein Promise Objekt oder jedes verkettbar Objekt aus einem Verfahren zurückzukehren, wo asynchrone Aktion stattfindet.

Quelle

2017-02-20 19:24:14

Testen Sie eine Funktion, die eine API aufruft

Antwort

Verwandte Themen