элемент по идентификатору имеет значение null при запуске тестов (невозможно прочитать свойство 'getAttribute' из null)

Question

[EDITED]: более ранняя версия этого вопроса по ошибке, хотя переменная echarts была null, когда она была результатом getElementById. Я подтвердил это, удалив el из вызова функции, и эта часть теста не вызвала подобную ошибку, подразумевая, что echarts действительно был доступен.

---

Я использую приложение create-реакции-приложение, в котором используется приложение jest test runner, и использую echarts.

import echarts from 'echarts/lib/echarts';

//...

    const el = document.getElementById('the-chart');
    this.chart = echarts.init(el);

//...

// lots of unecessary context ...'d out here:
  render() {
    const { classes } = this.props;
    return (
      <div className={...}>
        <div className={...}><!-- ... --></div>
        <div className={classes.metricsGraph} onClick={(e) => this.handleClick(e)}>
          <div id="the-chart" style={{width: "600px",height: "400px"}}></div>
        </div>
        <div className={...}><!-- ... --></div>
      </div>
    );
  }

Это работает, когда я загружаю страницу в браузере. Однако, когда я запускаю тесты, в этой последней строке я получаю

TypeError: Cannot read property 'getAttribute' of null

Значение el, возвращаемое document.getElementById, должно возвращать null, но только в тестовой среде. Этот код вызывается в компоненте componentDidMount callback.

Как мне пройти этот тест? Есть ли другой способ получить элемент или другое событие, которого я должен ждать в тестовой среде, чтобы этот элемент был доступен? Где можно посмотреть, почему в тесте и браузере это отличается?

Я относительно новичок в ноде / нпм, шутке, Javascript, который был написан не в 90-х годах, и реагирую, поэтому любые указатели на вещи, о которых я не думаю правильно, будут высоко оценены!