React-testing-library - test if an html element does not exist

Question

In my current code I have a div with id #___portal

<div id="___portal"></div>

I have a component where I create a portal adding the content to the #___portal (in my real code, this div will always be created)

import React, { useState, useEffect } from "react";
import { createPortal } from "react-dom";

const App = ({ children }) => {
  const [portalEl, setPortalEl] = useState();

  useEffect(() => {
    //in my real code #___portal exists
    setPortalEl(document.getElementById("___portal"));
    console.log(portalEl);
  }, [portalEl]);

  if (!portalEl) return null;

  return createPortal(
    <>
      <div id="modal" role="dialog">
        {children}
      </div>
    </>,
    portalEl
  );
};

export default App;

I am trying to do a test where I want to test that a text is contained in the component. My test fails and I suspect that it is because the content of my component is not being added to the #___portal and that is why my component is not rendering, how can I do to simulate this in my test?

import App from "./App";
import React from "react";
import { render } from "react-testing-library";
describe("<App />", () => {
  it("Should render text", async () => {
    let testId = "___portal";
    let newDiv = document.createElement("div");
    newDiv.setAttribute("id", testId);
    document.body.appendChild(newDiv);

    const text = "hello world";
    const { getByText } = render(
      <App>
        <div>{text}</div>
      </App>
    );
    expect(getByText(text)).toBeInTheDocument();
  });
});

//output of test
<body>
 <div
  id="___portal"
  />
 <div />
</body>

lissettdm · Accepted Answer · 2022-06-13 22:02:59Z

2

+50

Every time your component is rendered for first time portalEl is undefined and component returns null. Since you are getting portal root element in useEffect you can use async/await helper methods that work with queries to wait for changes in the DOM. But, according to your implementation I think that what you need to do is a small refactor to App component:

You don't need to wait for useEffect to get portalEl because you know it exists beforehand. This way you save an extra render by not calling setPortalEl

/** checking for object window in case this code runs on server side */
const portalEl = (typeof window !== 'undefined') ? document.getElementById("___portal"): null;

const App = ({ children }) => {

  if (!portalEl) return null;

  return createPortal(
    <>
      <div id="modal" role="dialog">
        {children}
      </div>
    </>,
    portalEl
  );
};

or assign its value directly:

  const [portalEl] = useState(document.getElementById("___portal"));

edited Jun 13, 2022 at 22:02

answered Jun 11, 2022 at 20:55

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

yavgz Over a year ago

Hello, thank you for replying. It's a long story, but I can't do what you say, this code compiles and I can't have something with document outside the useEffect because the build fails (server error). But I would really need help to correct my test, I need something in my test to help me simulate that this ___portal element has already been created.

lissettdm Over a year ago

@yavgz in that case you can check for object window ----> const portalEl = (typeof window !== 'undefined') ? document.getElementById("___portal"): null;

yavgz Over a year ago

Doing that, my test not works, do you see my live code? Mi objective is fix my test :O thanks genius

lissettdm Over a year ago

@yavgz codesandbox.io/s/jest-testing-react-forked-equ3j1

Eric Haynes · Accepted Answer · 2022-06-11 01:15:55Z

2

When testing react, ANYTHING that happens as the result of a useEffect needs to use the async API. Usually, this is as simple as using the findBy* methods instead of the getBy* methods. These return a Promise, so be sure to await it:

expect(await screen.findByText(text)).toBeInTheDocument();

answered Jun 11, 2022 at 1:15

Eric Haynes

5,9322 gold badges35 silver badges44 bronze badges

4 Comments

yavgz Over a year ago

thanks for answerig... do you see my live code? I need fix my test, this line not works for me.

Eric Haynes Over a year ago

codesandbox.io/s/jest-testing-react-forked-v4btne It runs fine for me. Note that toBeInTheDocument is provided by jest-dom which wasn't included in your sandbox. That error would surface as "is not a function", though. Any projects created by create-react-app or vite in the last few years already have that in there. The sandbox is also using react-testing-library, which was deprecated 3 years ago in favor of @testing-library/react

yavgz Over a year ago

your sandbox thows error in the test :(

Eric Haynes Over a year ago

What's the error? I click the link, go to the tests tab, and a few seconds later, it goes green. Test Summary 1 passed 1 total There are no failing tests, congratulations!

Collectives™ on Stack Overflow

React-testing-library - test if an html element does not exist

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related