'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