开玩笑/反应 - 组件未显示在快照中答案

【问题标题】：jest/react - component isn't show in the snapshot开玩笑/反应 - 组件未显示在快照中
【发布时间】：2019-03-03 09:26:19
【问题描述】：

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

在调试保存 if 语句“displayCheckInButton”值的 const 时，发现它在需要时为真。该组件应呈现内部组件。

测试：

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

我尝试了 wrapper 来查看它是否包含组件。包装器确实找到了一个具有内部组件类的元素，但快照仍然存在：

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>
 `;

希望我提供了足够的信息

【问题讨论】：

第一，displayCheckInButton 背后是什么？你确定在这个迭代中它是真的吗？在第 2 次（虽然它与您的问题无关），为什么您在测试中两次 mount() 相同的组件？
是的，这确实是真的....我是新手，所以...只是需要它来检查包装器
如果将 HTML 包装在 CheckInButton 的返回值中，是否会发生任何变化？即：const CheckInButton = ({ btnText = "", links = [] }) => (<div>....</div>)? console.log(wrapper.debug()) 返回什么？
只需在isTrue(displayCheckInButton) 处设置断点并检查其值。我猜这与您错过的数据/道具/组件代码有关。
感谢您的帮助，由于某种原因，它是片段。

标签： javascript reactjs jestjs

【解决方案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>
    );

谢谢大家

【讨论】：