Component with async componentDidMount

App.js

import React, { Component } from "react";
import axios from "axios";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      error: ""
    };
  }

  async componentDidMount() {
    try {
      const response = await axios.get("https://jsonplaceholder.typicode.com/posts")
      this.setState({
        posts: response.data
      });
    } catch (e) {
      this.setState({ error: e.message });
    }
  }

  render() {
    const { posts } = this.state;
    return (
      <div className="App">
        {posts.map(post => (
          <div key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

App.test.js

import React from "react";
import { shallow } from "enzyme";
import axios from "axios";
import App from "./App";

jest.mock("axios");

it("fetches posts", done => {
  const response = {
    data: [{ id: 1 }, { id: 2 }, { id: 3 }]
  };
  axios.get.mockResolvedValueOnce(response);
  const wrapper = shallow(<App />);

  setImmediate(() => {
    expect(wrapper.state().posts).toEqual([{ id: 1 }, { id: 2 }, { id: 3 }]);
    done();
  });
});

it("transmits a useful message when fetching is not successful", done => {
    axios.get.mockImplementation(() => Promise.reject(new Error('error')))

    const wrapper = shallow(<App />);

    setImmediate(() => {
      expect(wrapper.state().error).toBe("error");
      done();
    });
  });