Всем привет! Это мой первый пост здесь, так что оставьте мне место для улучшения 😆

Я столкнулся с проблемой, когда я хотел, чтобы мой тест Jest/Enzyme ожидал извлеченных данных, прежде чем ожидать каких-либо результатов теста.

Допустим, ваш компонент получает данные о componentDidMount, и вам нужно ждать их перед тестированием.

componentDidMount() {
  this.props.store.fetchData();
}

Вы должны использовать Promises и ждать их, прежде чем ожидать блоки в своем тесте.

Есть как минимум два способа справиться с этим:

  1. Вы можете иметь поле обещания в своем магазине и присвоить ему значение выборки данных.
  2. Если вы не хотите создавать дополнительные поля в своих магазинах, вы можете воспользоваться EventEmitter:
async fetchData() {
  await this.store.refresh(); //we want test to await this
  eventEmitter.emit('DATA_LOADED'); 
}

Наш тест:

describe('Component test', async () => {
  test('Loads data', async () => {
  const dataLoadedPromise = new Promise((resolve) => {
    store.eventEmitter.on('DATA_LOADED', () => resolve());
  });
  const wrapper = mount(profileContainer);
  await dataLoadedPromise;
  // expect here
});

И это все 😃