Я только начал изучать React, и я пытаюсь выполнить некоторый тест, чтобы обойти его.
Я играю с API, и мой componentDidMount использует вызов feth. Как смоделировать возврат данных из выборки при выполнении componentDidMount или создании компонента? В основном Я просто хочу смоделировать ложный вызов, а затем проверить, было ли заполнено состояние этими данными. Я знаю, что с помощью Jasmine при тестировании компонента Angular вы можете сделать что-то вроде spyOn (). ThenReturn () как мне добитьсячто?
Вот код:
import React from 'react';
import './App.css';
import { CardList } from './components/card-list/card-list.component';
import { Search } from './components/search/search.component';
class App extends React.Component {
constructor() {
super();
this.state = {
pokemons: [],
searchField: ''
}
}
componentDidMount() {
fetch('http://pokeapi.co/api/v2/pokemon/?limit=10')
.then(res => res.json())
.then(res =>
Promise.all(
res.results.map(
element => fetch(element.url)
.then(res => res.json())
.then(pokemon => { return { id: pokemon.id, name: pokemon.name, img: pokemon.sprites.front_default } })
)
)
).then(pokemons => this.setState({ pokemons }));
}
render() {
return (
<div className="App">
<CardList pokemons={this.state.pokemons} />
</div>
);
}
}
export default App;