шутить / реагировать - компонент не отображается в снимке

Question

У меня есть компонент, который содержит компонент, который отображается на основе оператора if.выражение if false добавляет класс css к компоненту контейнера, а не отображает внутренний компонент, и если true, в противном случае.класс добавляется или не добавляется правильно.С другой стороны, внутренний компонент не отображается в снимке, несмотря ни на что.компонент отлично работает в браузере.

это контейнер:

 <React.Fragment>
            <div className={containerClasses}>
                <div className="conditions-types">
                    <TableHeaderCell title={texts.bookingReferenceInformation1}/>
                    {isTrue(displayFlightBookingReference) && <TableHeaderCell title={texts.bookingReferenceInformation2}/>}
                    {isTrue(displayBookingDate) && <TableHeaderCell title={texts.bookingReferenceInformation3}/>}
                    <TableHeaderCell title={texts.bookingReferenceInformation4}/>
                </div>
                <div className="condition-values">
                    <TableCell value={reservation.bookingCode}/>
                    {isTrue(displayFlightBookingReference) && <TableCell value={bookingNumber}/>}
                    {isTrue(displayBookingDate) && <TableCell value={getHolidaySummaryDate(reservation.datUserCreated)}/>}
                    <TableCell value={departureDateTime}/>
                </div>
            </div> 

             //following is the missing component

            {isTrue(displayCheckInButton) && <CheckInButton btnText={texts.checkInNow} links={links}/>}
        </React.Fragment>

это внутренний компонент:

const CheckInButton = ({btnText ='' ,links= []}) =>
<div className="btn-section thankyouSection">
    <div className="checkin-now-btn">
        <a data-hook="checkInNow" target="_blank" itemProp="url" href={links && links.CheckInNow}>{btnText}</a>
    </div>
</div>;

при отладке const, содержащего значение для оператора if "displayCheckInButton",оказалось, что это правда, когда это необходимо.компонент должен визуализировать внутренний компонент.

тест:

it(`should render BookingReference component with check-in button`, () => {
    const bookingReferenceComponent = mount(<BookingReference {...props} />);
    const wrapper = mount(<BookingReference {...props} />);
    expect(wrapper.find('.btn-section').length).toEqual(1);
    expect(bookingReferenceComponent).toMatchSnapshot();
});

Я попробовал обертку, чтобы увидеть, содержит ли он компонент.Обертка действительно находит один элемент с классом внутреннего компонента, как и должно быть, но снимок остается:

exports[`BookingReference Tests should render BookingReference component 
with check-in button 1`] = `
<div class="condition-table thankyouSection">
<div class="conditions-types">
    <div class="type">
        <div></div>
    </div>
    <div class="type">
        <div></div>
    </div>
</div>
<div class="condition-values">
    <div class="value">ABCDE12345</div>
    <div class="value">1 June 2018</div>
</div>

 // in here should be the missing component


 </div>
 `;

надеюсь, я дал достаточно информации

Answer 1

решение:

return (
        //instead of fragment i tried div

        <div>
            <div className={containerClasses}>
                <div className="conditions-types">
                    <TableHeaderCell title={texts.bookingReferenceInformation1}/>
                    {isTrue(displayFlightBookingReference) && <TableHeaderCell title={texts.bookingReferenceInformation2}/>}
                    {isTrue(displayBookingDate) && <TableHeaderCell title={texts.bookingReferenceInformation3}/>}
                    <TableHeaderCell title={texts.bookingReferenceInformation4}/>
                </div>
                <div className="condition-values">
                    <TableCell value={reservation.bookingCode}/>
                    {isTrue(displayFlightBookingReference) && <TableCell value={bookingNumber}/>}
                    {isTrue(displayBookingDate) && <TableCell value={getHolidaySummaryDate(reservation.datUserCreated)}/>}
                    <TableCell value={departureDateTime}/>
                </div>
            </div>
            {isTrue(displayCheckInButton) && <CheckInButton btnText={texts.checkInNow} links={links}/>}
        </div>
    );

Спасибо всем