Реакция юнит-теста на заглушку с энзимом и шуткой

Question

Я пытаюсь заглушить вызов API в реакции, используя энзим и jest.

Код моего компонента React выглядит следующим образом.Это прекрасно работает.

async componentDidMount() {
    try {
      const res = await fetch(FETCH_ENDPOINT)
        if(res.ok) {
          const data = await res.json()
          this.setState({
            players: data.players,
            error: false
          });
        } else {
          throw new Error('Something went wrong');
        }
    } catch (error) {
      this.setState({
        error: true,
      })
    }
  }

Я пытаюсь смоделировать ответ и проверить успех и неудачи вызова API.Мой тестовый код выглядит так, и он никогда не обновляет this.state.players с ответом от API.Я чувствую, что совершаю простую ошибку.Кто-нибудь может увидеть, что не так с кодом ниже?Это просто показывает, что длина равна 0, а не 2 для этой строки

Возможно, это как-то связано с двумя обещаниями в моем вызове API componentDidMount, но у меня есть только одно в моем файле спецификации?

expect(renderedComponent.state('players').length).toEqual(2)

import React, { Component } from 'react';
import App from './App';
import { shallow } from 'enzyme'

const result = {
    'players': [
      {
        'firstname': 'Robbie',
        'lastname': 'Keane',
      },
      {
        'firstname': 'Alan',
        'lastname': 'Shearer',
      }
    ]
  }

describe('App', () => {
  describe('componentDidMount', () => {
    it('sets the state componentDidMount', async () => {
      window.fetch = jest.fn().mockImplementation(() => ({
        status: 200,
        ok: true,
        json: () => new Promise((resolve, reject) => {
          resolve({
            result: {
             'players': [
               { 'firstname': 'Robbie', 'lastname': 'Keane' },
               { 'firstname': 'Alan', 'lastname': 'Shearer' }
            ]
          })
        })
      }))

      const renderedComponent = await shallow(<App />)
      await renderedComponent.update()
      expect(renderedComponent.state('players').length).toEqual(2)
    })
  })
})

Answer 1

Как вы упомянули, вам нужно еще одно Обещание в вашем тестовом файле.Также вы должны удалить свойство result из вашего объекта json.Вот рабочий тестовый код:

window.fetch = jest.fn().mockImplementation(() => {
    return new Promise((resolve, reject) => {
        resolve({
            status: 200,
            ok: true,
            json: () => new Promise((resolve, reject) => {
                resolve({
                    'players': [
                        { 'firstname': 'Robbie', 'lastname': 'Keane' },
                        { 'firstname': 'Alan', 'lastname': 'Shearer' }
                    ]
                });
            })
        });
    });
})

Тестовый компонент:

import React from 'react';

const TEST = "test";

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        players: [],
        error: false,
    };
  }
  async componentDidMount() {
    try {
      const res = await fetch(TEST)
      if(res.ok) {
        const data = await res.json()
        this.setState({
          players: data.players,
          error: false,
        });
      } else {
        throw new Error('Something went wrong');
      }
    } catch (error) {
      this.setState({
        error: true,
      });
    }
  }
  render() {
    return (<div>Hello world</div>);
  }
}

export default Test;