Реагировать на сбои модульного теста массива полей формы

Question

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

export const UttakPeriod = ({
  fields,
  updatePeriode,
  editPeriode,
  cancelEditPeriode,
  isAnyFormOpen,
  isNyPeriodeFormOpen,
  readOnly,
  periods,
  ...other
}) => (
  <div>
    {fields.map((fieldId, index, field) => {
      const period = field.get(index);

      return (
        <div key={fieldId}>
          {other.meta.error && index === 0 ? <AlertStripe type="warning">{other.meta.error}</AlertStripe> : null}
          <Row>
            <Column>
                <UttakPeriodType />
                <UttakPeriodContent />
            </Column>
            {periods.length === fields.length &&
                renderValidationGraphic(periods, index, index === (fields.length - 1))
              }
          </Row>
        </div>
      );
    })}
  <

/div>
);

Я пытаюсь проверить, что отображается с помощью функции renderValidationGraphic, которая выглядит следующим образом:

const renderValidationGraphic = (periods, index, isLastIndex) => {
  if (!isLastIndex) {
    const period= periods[index];
    const nextPeriod = periods[index + 1];
    const diff = calcDays(period.tom, nextPeriod .fom, 'YYYY-MM-DD');

    if (moment(period.tom) >= moment(nextPeriod .fom)) {
      return (
        <div className={styles.periodIconWrapper}>
          <Image src={overlapp} alt="Periods overlap" />
        </div>
      );
    }
  }

  return null;
};

Я пытаюсь проверить это следующим образом:

const getMockedFields = (fieldNames, periods) => {
  const field = {
    get: idx => periods[idx],
  };
  return {
    map: callback => fieldNames.map((fieldname, idx) => callback(fieldname, idx, field)),
  };
};

const fieldNames = ['periods[0]', 'periods[1]'];
const periods = [{
  fom: '2017-10-01',
  id: '2017-10-01 | 2017-10-10',
  openForm: false,
  tom: '2017-10-10',
  updated: false,
}, {
  fom: '2017-10-09',
  id: '2017-10-09 | 2017-10-17',
  openForm: true,
  tom: '2017-10-17',
  updated: false,
}];

const updatePeriode = sinon.spy();
const editPeriode = sinon.spy();
const cancelEditPeriode = sinon.spy();
const isAnyFormOpen = sinon.spy();

describe('<UttakPeriod>', () => {
  it('should render image for overlapping periods', () => {
    const wrapper = shallowWithIntl(<UttakPeriod
      fields={getMockedFields(fieldNames, periods)}
      updatePeriode={updatePeriode}
      editPeriode={editPeriode}
      cancelEditPeriode={cancelEditPeriode}
      isAnyFormOpen={isAnyFormOpen}
      periods={periods}
      meta={meta}
      readOnly
    />);

    const image = wrapper.find(Image);
    expect(image).to.have.length(1);
    expect(image.prop('alt')).is.equal('Periods overlap');
  });

Это работает в реальной жизни, я получаю изображение, если периоды перекрываются.Функция renderValidationGraphic работает как надо, что может быть видно здесь , но тест по какой-то причине не проходит.

AssertionError: ожидалось, что {length: 0} будет иметь длину 1, но получил 0

Почему этот тест не удался, и как я могу исправить этот тест такчто это работает?