Компонент Stateful React с асинхронной функцией не прошел тест Jest

Я слежу за этим Учебное пособие по тесту Jest на Pluralsight здесь. И я написал код точно так же, как автор, но мой тест почему-то не проходит.

Мой запрос на включение в репозиторий автора: https://github.com/danielstern/isomorphic-react/pull/19

У меня есть простой компонент React, он обновляет свое состояние count с помощью асинхронного/ожидающего вызова службы в componentDidMount.

{this.state.count != -1 ? `${this.state.count} Notifications Awaiting` : 'Loading...'}

ОЖИДАЛ

Поскольку я издевался над NotificationsService и установил для счетчика значение 42, тест должен пройти с текстом внутри компонента как "42 Notifications Awaiting!"

РЕЗУЛЬТАТЫ

Текст остается застрявшим по умолчанию Loading...

Я правильно издевался над сервисом, и переменная count даже правильно регистрируется как 42! Однако this.state.count все еще -1, поэтому вместо отображения: ${this.state.count} Notifications Awaiting он по-прежнему отображает Loading... и, таким образом, не проходит тест.

Что я пробовал

1) Пробовал добавлять 1000 к задержке.

2) Пробовал использовать setTimeout внутри теста.

3) Пробовал jest.useFakeTimers(); и jest.runAllTimers();

Однако ничего не работает, count внутри компонента застрял на -1, хотя count установлено на 42. Мне просто кажется, что мой тест выполняется до завершения установки состояния?

Компонент NotificationsViewser.jsx

import React from 'react';
import NotificationsService from '../services/NotificationsService';

export default class componentName extends React.Component {
  constructor(...args) {
    super(...args);

    this.state = {
      count: -1
    }
  }

  async componentDidMount () {
    let { count } = await NotificationsService.GetNotifications();
    console.info('count:', count);
    this.setState({
      count
    });
  }

  componentDidUpdate() {
    console.info('componentDidUpdate:', this.state);
  }

  render() {
    return (
      <div className = "mt-3 mb-2">
        <div className = "notifications">
          {this.state.count != -1 ? `${this.state.count} Notifications Awaiting` : `Loading...`}
        </div>
      </div>
    )
  }
}

NotificationsService.js

import { delay } from 'redux-saga';

export default {
  async GetNotifications() {
    console.warn("REAL NOTIFICATION SERVICE! CONTACTING APIS!");

    await delay(1000);
    return { count: 42 };
  }
}

издевается: NotificationsService.js

let count = 0;

export default {
  __setCount(_count) {
    count = _count;
  },
  async GetNotifications() {
    console.warn("GOOD JOB! USING MOCK SERVICE");
    return { count };
  }
}

Ну наконец то...

Тест

import React from 'react';
import renderer from 'react-test-renderer';
import delay from 'redux-saga';

import NotificationsViewer from '../NotificationsViewer';

jest.mock('../../services/NotificationsService');

const notificationService = require('../../services/NotificationsService').default;

describe('The notification viewer', () => {

  beforeAll(() => {
    notificationService.__setCount(42);
  });

  it('should display the correct number of notifications', async() => {
    const tree = renderer
      .create(
        <NotificationsViewer/>
      );

    await delay();

    const instance = tree.root;
    const component = instance.findByProps({className: `notifications`});
    const text = component.children[0];
    console.info('text is:', text);

    expect(text).toEqual('42 Notifications Awaiting!');
  });
})