Javascript jest/react-组件为'；不显示在快照中

我有一个组件，它包含一个基于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>

{isTrue（displayFlightBookingReference）&&&}
{isTrue（displayBookingDate）&&}
{isTrue（displayFlightBookingReference）&&&}
{isTrue（displayBookingDate）&&}
//以下是缺少的组件
{isTrue（displayCheckInButton）&&&}

这是内部组件：

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 CheckInButton=（{btnText=''，links=[]}）=>
;

当调试包含if语句“displayCheckInButton”值的const时，在需要时显示为true。组件应渲染内部组件

测试：

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

it（`should render bookingference component with check-in button`，（）=>{
常量bookingReferenceComponent=mount（）；
const wrapper=mount（）；
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>
 `;

exports[`BookingReference测试应呈现BookingReference组件
使用签入按钮1`]=`
ABCDE12345
2018年6月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>
    );

返回(
//我尝试了div，而不是fragment
{isTrue（displayFlightBookingReference）&&&}
{isTrue（displayBookingDate）&&}
{isTrue（displayFlightBookingReference）&&&}
{isTrue（displayBookingDate）&&}
{isTrue（displayCheckInButton）&&&}
);

---

thx各位

在第1位，显示签入按钮的背后是什么？你确定这在这个迭代中是真的吗？在第二个位置（虽然与您的问题无关），为什么您在测试中两次装载相同的组件？是的，这是肯定的。。。。我是个新来开玩笑的人，所以…只是需要它来检查包装器如果你把HTML包装在CheckInButton返回值的括号中，会有什么变化吗？i、 e:

const CheckInButton=（{btnText=”“，links=[]}）=>（…）

？而

console.log（wrapper.debug（））

返回什么呢？只需在

isTrue（displayCheckInButton）

的行上设置断点，然后检查值是多少。我猜你错过了一些与数据/道具/组件代码相关的东西。谢谢你的帮助，因为某种原因，这是片段。