Can't set isIntersecting to true when testing

[danielbeckera]

Hi,
I have a page on nextJS called development-details.tsx, this page renders a component called GalleryDevelopmentDetails.

On development-details.tsx I use the useInView hook, like this:

  const { ref, inView, entry } = useInView({
    threshold: 0.7,
    triggerOnce: true,
  });

I pass the ref through GalleryDevelopmentDetails props, just like this:

  <GalleryDevelopmentDetails
    testId="galeria"
    galleryRef={ref}
    galleryIsVisible={galleryIsVisible}
    setGalleryIsVisible={setGalleryIsVisible}
    results={results}
  />

And inside GalleryDevelopmentDetails I put that ref inside a section html tag.

  <section
    ref={galleryRef}
    className={styles.container}
    data-testid={testId}
  >

Back to development-details.tsx, I have a useEffect that, when inView is updated and its true, it sets a state to true and then opens up a modal.

  useEffect(() => {
    const ONE_DAY_IN_SECONDS = 60 * 60 * 24;
  
    if (inView && !cookiePopup) {
      if (setGalleryIsVisible) setGalleryIsVisible(inView);
  
      if (galleryIsVisible) {
        setCookie(`imb_popSchedule`, `true`, {
          maxAge: ONE_DAY_IN_SECONDS,
        });
      }
    }
  }, [cookiePopup, setCookie, setGalleryIsVisible, galleryIsVisible, inView]);

The functionality is working, as soon as viewport hits almost bottom line of the element with ref, it sets the state and it opens up a modal.

The thing is that I'm trying to test it but I can't find any success.

Here is my test:

test(`Render ModalScheduleDevelopmentDetails component when scroll reaches gallery component`, async () => {
  renderWithReduxAndLocalization(
    <DevelopmentDetails {...mockProps} />,
    { development: mockProps?.results },
    mockLocalization,
  );
  
  mockAllIsIntersecting(1);
  
  await waitFor(() => {
    expect(
      screen.getByText(`Quero visitar por videochamada`),
    ).toBeInTheDocument();
  });
  
  });

I've tried without waitFor, with await findbytext etc, nothing seems to open up the modal that is set up to open when inView equals to true.

[thebuilder]

Have you checked if inView becomes true?Simpleconsole.log(inView)in when rendering. Might be youruseEffect` not performing as expected.

[danielbeckera]

i logged inView inside my useEffect and seeing it when executing tests it shows only inView false, so its probably it, its not setting it to true, but why? im using:
mockAllIsIntersecting(true);
just after the render on this specific test, isnt this supposed to set inView to true?