Блог

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

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

Родительский компонент (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>
        );
    };
};
  

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

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

 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");
    });
});
  

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

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

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