Medium store - Testing asynchronous code with Jest and Testing Library React - src/App.js - part 1

App.js

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import fetchPosts from './services/fetchPosts';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    let mounted = true;

    const fetchData = async () => {
      const newPosts = await fetchPosts();
      if (mounted) {
        setPosts(newPosts);
      }
    }
    
    fetchData();
    return () => { mounted = false; };
  }, []);

  if (posts.length === 0) {
    return <span>Loading...</span>;
  }
  
  return (
    <div className="App">
      <ul>
        {
          posts.map(post => (
            <li key={post.id}>{post.title}</li>
          ))
        }
      </ul>
    </div>
  );
}

App.propTypes = {
  term: PropTypes.string,
};

App.defaultProps = {
  term: 'posts',
};

export default App;