'Jest Enzyme ReactWrapper.length mutates after simulate click or ReactWrapper.find
Component:
const AlternateFlightsOverlay = ({ flights }) => {
const [showSnackBar, setShowSnackBar] = useState(false);
const openBottomSheet = (e, card) => {
e.stopPropagation();
bannerData = card.ctaDetail.sbData;
setShowSnackBar(true);
};
return (
<div>
{!isEmpty(flights) &&
flights.map((card, index) => (
<div
data-test="component-altFltOverlay-fltCard"
key={card.rKey}
className="listing-card-wrpr fli-list one-way append_bottom15"
id={card.rKey}
dataindex={index}
>
<div
data-test="component-altFltOverlay-fltCardBody"
onClick={(e) => {
openBottomSheet(e, card);
}}
>
<CardBody />
</div>
</div>
))}
{showSnackBar && bannerData && (
<BottomOverlay
data-test="component-altFltOverlay-snackBar"
classNames="altFltOverlay"
data={bannerData}
dismiss={() => setShowSnackBar(!showSnackBar)}
/>
)}
</div>
);
};
export default AlternateFlightsOverlay;
In my test.js file
let snackBarExists = findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar');
expect(snackBarExists.length).toBe(0); // <====== this is "1"
altFltBannerCard.simulate('click');
snackBarExists = findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar');
expect(snackBarExists.length).toBe(1);
I want to check the SnackBar component doesn't exist before click. On click, my component calls useState()'s setter function and conditionally renders the SnackBar component.
But in my test before simulate('click') I am getting length of 1.
But if I comment the below line
// altFltBannerCard.simulate('click');
then it returns 0.
if I comment the line:
// snackBarExists = findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar');
then expect(snackBarExists.length).toBe(1); assertion fails.
I also tried with const and two different variables:
const snackBarExistsBeforeClick = findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar');
expect(snackBarExists.length).toBe(0);
altFltBannerCard.simulate('click');
const snackBarExistsAfterClick = findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar');
expect(snackBarExists.length).toBe(1);
But again assertion at expect(snackBarExists.length).toBe(0); fails saying received 1
Again if I comment simulate('click') line assertion toBe(1) fails but if I try something like this:
const snackBarExistsBeforeClick = findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar');
expect(snackBarExistsBeforeClick.length).toBe(0);
altFltBannerCard.simulate('click');
// const snackBarExistsAfterClick = findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar');
expect(findByTestAttr(altFlightsOverlay, 'component-altFltOverlay-snackBar').length).toBe(1);
Assertion toBe(0) fails saying Expected: 0 Received: 1.
I am confused what is the issue?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
