ReactJS componentDidMount выборочный тестовый модуль - PullRequest
1 голос
/ 22 октября 2019

Я только начал изучать 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...