我有一个组件,其中包含一个基于 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”的值的常量时,它在需要时显示为真。该组件应呈现内部组件。
测试:
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>
`;
希望我提供了足够的信息
最佳答案
解决方法:
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>
);
谢谢大家
关于javascript - 开 Jest/ react - 组件未显示在快照中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54967382/