Отправка состояния родительского массива в качестве подпорки дочернему элементу с «Не удается прочитать свойство« сортировка »неопределенного» в тесте

Question

У меня есть родительский компонент с состоянием, которое включает в себя массив объектов.Я передаю этот массив дочернему компоненту в качестве реквизита.В дочернем компоненте массив сортируется, затем сопоставляется и в результате возвращает компонент внука.Это работает, но из тестового примера я получил сообщение об ошибке «TypeError: Невозможно прочитать свойство 'sort' of undefined"

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

Родительский компонент (airdropDB.airdrops является ссылкой на массив объектов из другого файла)

class ContentPanel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            airdrops: airdropDB.airdrops
        };
    }
    render() {
        return (
            <div>
                <FiltrPanel />
                <AirdropPanel airdrops={this.state.airdrops}/>
            </div>
        )
    }
}

Дочерний компонент

class AirdropPanel extends Component {
    render() {
        let airdropBlocks = this.props.airdrops.sort((a, b) => {
            return b.addDate - a.addDate;
        }).map((e, i) => {
            return (<Airdrop key={e.title + i}
                title={e.title}
                value={e.value}
                status={e.status}
                logo={e.logo} />)
        });
        return (
            <div data-testid="airdropPanel">
                {airdropBlocks}
            </div>
        );
    };
};

Результат в порядке, яесть правильные и отсортированные аэродромные блоки, но ошибка из контрольного примера вызывает тревогу.

Тестовый файл:

import React from 'react';
import AirdropPanel from './AirdropPanel';
import { render } from 'react-testing-library';

describe('Airdrop Panel has', () => {
    it('Airdrop block inside', () => {
        const { getByText } = render(<AirdropPanel />);
        expect(getByText(/rozpocznij/i)).toBeInTheDocument();
    });

    it('multi airdrop blocks inside', () => {
        const { getByTestId } = render(<AirdropPanel />);
        let moreThanOne = getByTestId("airdropPanel").childElementCount > 1;
        expect(moreThanOne).toBe(true);
    }); 
    it('airdropBlock dates from newer to older sort function works', () => {
        //Test zależny od bazy airdrop
        const { getByTestId } = render(<AirdropPanel />);
        const firstAirdropBLock = getByTestId("airdropPanel").firstChild;
        expect(firstAirdropBLock.firstChild.textContent).toBe("Crypto Circle X");
    });
});

Answer 1

. Сортировка не выполняется. Это наиболее вероятно, потому что this.props.airdrops не определен

Я не знаю, но вы уверены, что не должны ставить что-то в свой тест пропеллера?

const { getByText } = render(<AirdropPanel airdrops={??}/>);