Как написать модульный тест для реагирующего компонента, который получает сообщения реквизит от Axios - PullRequest
Новая
       4

Как написать модульный тест для реагирующего компонента, который получает сообщения реквизит от Axios

0 голосов
/ 25 февраля 2020

Я хочу протестировать этот компонент только с Jest и реагировать на тестирование библиотеки. Он должен получить реквизит в виде массива постов от Компонента приложения и отобразить набор BlogPosts

BlogContainer. js: 

import React, { Component } from "react";
import BlogPost from "./BlogPost";
import CardColumns from "react-bootstrap/CardColumns";
import { paginate } from "../../utils/paginate";

export default class BlogContainer extends Component {
  render() {
    const currentPosts = paginate(
      this.props.posts,
      this.props.currentPage,
      this.props.numberPerPage
    );
    return (
      <CardColumns>
        {currentPosts.map(post => {
          return (
            <BlogPost
              key={post.id}
              title={post.title}
              body={post.body}
              picture="image.jpg"
            ></BlogPost>
          );
        })}
      </CardColumns>
    );
  }
}

Приложение. js: Компоненты приложения отправляют реквизиты вниз по дереву компонентов после извлечения данных: App -> Content -> BlogContainer 

import React, { Component } from "react";
import AppBar from "./components/layout/Navbar";
import Content from "./components/layout/Content";
import { getPages } from "./utils/paginate";
import { fetchPosts } from "./utils/fetchData";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: [],
      currentPage: 0,
      pages: [],
      numberPerPage: 6
    };
  }

  changePage = newPage => this.setState({ currentPage: newPage });

  getPosts = async () => {
    const posts = await fetchPosts();
    this.setState({ posts });
  };

  componentDidMount() {
    this.getPosts();
  }

  render() {
    const pages = getPages(this.state.posts, this.state.numberPerPage);
    return (
      <div className="App">
        <AppBar></AppBar>
        <Content
          posts={this.state.posts}
          currentPage={this.state.currentPage}
          changePage={this.changePage}
          pages={pages}
          numberPerPage={this.state.numberPerPage}
        ></Content>
      </div>
    );
  }
}

export default App;

utils / fetchData. js : это функция, которая выбирает данные, используя Ax ios. 

import axios from "axios";

export const fetchPosts = async () => {
  const result = await axios.get(`https://jsonplaceholder.typicode.com/posts`);
  return result.data;
};
...