如何在 ComponentDidMount 中模拟一个简单的 API 调用（Get Todos） - React + Typescript + Jest + Enzyme

Question

The app

The app is a simple To Do List. This App gets the todos from https://jsonplaceholder.typicode.com/todos?&_limit=5 .

What I am trying to do

Test an API call that is executed in ComponentDidMount in .

I want to mock the API call and return a list with two items. Then check if there are two items in the array or state.

What files are important for you?

1. App.tsx (Component to be tested)
2. ToDoList.test.tsx (Contains test function)

Small part of App.tsx to simplify it

class App extends Component {

public state: IState = {
    items: [],
    value : 5,
    deleteItemParent : this.deleteItemParent
  };


  getAllTodos = async () => {
    await fetch(
      `https://jsonplaceholder.typicode.com/todos?&_limit=${this.state.value}`
    )
      .then((response) => response.json())
      .then((json) => {
        this.setState({ items: json })
      });
  };
  componentDidMount() {
    this.getAllTodos();
  }

componentDidUpdate(prevProps : any, prevState: any) {
  // Updates todo's if state changed
  if (prevState.value !== this.state.value) {
    this.getAllTodos();
  }
}

render(){
    return (
      <div className="App">
            <AddToDo addToDoParent={this.addToDo}/>
            <div>
                Todo's : {this.state.value}
            </div>
            <ToDoList items={this.state.items} deleteFromParent={this.deleteItemParent}/>
      </div>
    );
  }
}

ToDoListMock.test.tsx

import React from 'react';
import { shallow , mount, ShallowWrapper} from 'enzyme';
import App from "../App";
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(
      [
        {
          title: "Todo1",
          completed: false
        },
        {
          title: "Todo2",
          completed: false
        }
      ]
    )
  })
) as jest.Mock<any>

it("must contain 2 items in state after mock api call", async () => {
  const wrapper = shallow(<App />);

  await new Promise(res => setTimeout(res));
  // await jest.requireActual('promise').resolve()

  // Collect items from state
  const itemsFromState : any = wrapper.state('items');

  // Expect it to have a length of 2
  expect(itemsFromState.length).toBe(2);
})

The Error

Expected: 2 Received: 0

EDIT

SetupTests.ts

/* eslint-disable import/no-extraneous-dependencies */
import Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new ReactSixteenAdapter() });

I noticed an error while doing the test.

Answer 1

There are a few things you have to change to make it work:

• You forgot to trigger to fetch your notes as your component mounted by putting to componentDidMount :

componentDidMount() {
  this.getAllTodos();
}

• Like you said, the data response is the list which is not a literal object, so you have to change your mock returning an array instead of literal object with todos property. But to make sure it runs well, we have to move beforeEach :

beforeEach(() => {
 global.fetch = jest.fn(() =>
    Promise.resolve({
        json: () => Promise.resolve([ // Returns as an array here
            {
                title: "Todo1",
                completed : false
            },
            {
                title: "Todo2",
                completed : false
            }
        ])
    })
  ) as jest.Mock<any> 
})

• Delay your test before getting the state since you have a mock promise need to be done:

it("must contain 2 items in state after mock api call", async () => {
  const wrapper = shallow(<App />);
  
  // Delay with either following ways to wait your promise resolved
  await new Promise(res => setTimeout(res));
  // await jest.requireActual('promise').resolve()

  // Collect items from state
  const itemsFromState: Array<any> = wrapper.state('items');

  // Expect it to have a length of 2
  expect(itemsFromState.length).toBe(2);
})

• I also created a link for you to compare your code to: https://repl.it/@tmhao2005/Todo