Jest Test - уникальная «ключевая» ошибка опоры.Проверьте метод рендеринга XYZ

Question

У меня есть проходной тест, но для получения «массива или итератора должен быть уникальный ключ». errir

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

            if (width) {
                arrayList = listings.map(function (listing, i) {
                    return <div className="col"><ListingSimple key={i} listing={listing} displayType={displayType} /></div>;
                });
            }
            else {
                arrayList = listings.map(function (listing, i) {
                    return <ListingSimple key={i} listing={listing} displayType={displayType} />;
                });
            }

В моем тесте я передал все необходимые реквизиты для остальной части компонента. Это просто дает console.error для вышеизложенного. arrayList настроен правильно, и я вижу свой единственный или несколько списков. У меня просто есть блокировщик этой ошибки.

Просто пытаюсь это убрать console.error ...

Предупреждение. Каждый дочерний элемент в массиве или итераторе должен иметь уникальный ключ. Проверьте метод рендеринга ... Подробнее см. На веб-сайте fb реагировать-предупреждений-ключей.

Answer 1

Рассмотрите возможность добавления ключа в div-обертку, например:

if (width) {
            arrayList = listings.map(function (listing, i) {
                return <div key={i} className="col"><ListingSimple key={i} listing={listing} displayType={displayType} /></div>;
            });
        }
        else {
            arrayList = listings.map(function (listing, i) {
                return <ListingSimple key={i} listing={listing} displayType={displayType} />;
            });
        }

Answer 2

Ключ должен находиться на самом внешнем дочернем элементе, который возвращается (в данном случае div).