Target container is not a DOM element react testing

Question

I am receiving this Target container is not a DOM element error when running test. What is the solution for this? I already checked all the solutions here in stackoverflow but nothing solves my problem.

Here is my test file:

/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable no-undef */
import { render, screen } from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import Header from '../components/header'
import store from '../redux/store'

const MockHeader = () => {
  <Router>
      <Provider store={store}>
        <Header />
      </Provider>
  </Router>
}

describe('First page', () => {
  it('render the service name', async () => {
    render(<MockHeader />);
    const headingElement = screen.getByText(/Bayawan Water District/i);
    expect(headingElement).toBeInTheDocument();
  })
})

Here is my index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'

import App from './App'

import store from './redux/store'
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.render(
  <Router>
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  </Router>,
  document.getElementById('root')
)

Here is my header.js:

import React from 'react'
import { useParams } from 'react-router-dom'

import GetLogo from '../helpers/getLogo'
import GetHeader from '../helpers/getHeader'
import { StyledHeader, ServiceLogo, StyledTitle } from './styles/Header.styled'

function Header() {
  const params = useParams()

  return (
    <StyledHeader>
      <ServiceLogo src={GetLogo(params.svc)} alt="Logo" />
      <StyledTitle data-testid="header">{GetHeader(params.svc)} </StyledTitle>
    </StyledHeader>
  )
}

export default Header

"I already checked all the solutions here in stackoverflow": Which ones did you research? Can you include links to them at the end of your question? — jsejcksn
– jsejcksn, Commented Mar 5, 2022 at 3:54

Tim R. Jensen · Accepted Answer · 2022-03-05 10:44:13Z

In your test, do you need to add a container to the render call?

describe('First page', () => {
  it('render the service name', async () => {
    render(<MockHeader />); // A container argument seems to be missing here.
    const headingElement = screen.getByText(/Bayawan Water District/i);
    expect(headingElement).toBeInTheDocument();
  })
})

Edit

Lifted directly from Reacts documentation:

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Hello from "./hello";

let container = null;
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("renders with or without a name", () => {
  act(() => {
    render(<Hello />, container);
  });
  expect(container.textContent).toBe("Hey, stranger");

  act(() => {
    render(<Hello name="Jenny" />, container);
  });
  expect(container.textContent).toBe("Hello, Jenny!");

  act(() => {
    render(<Hello name="Margaret" />, container);
  });
  expect(container.textContent).toBe("Hello, Margaret!");
});

Lauren M Wright · Accepted Answer · 2022-10-08 18:20:08Z

I encountered the same issue on my Jest tests when I upgraded to React 18 on an component libary I publish to npm.

The issue is caused by upgrading to .createRoot instead of ReactDOM.render (see discussion here).

React 17 looks to render immediately when you call ReactDOM.render, in contrast, React 18 doesn't, it performs the render work only once any other code has finished (which will usually be a few milliseconds later)

However, the fixes on that discussion post did not solve this error for me. As it turned out I was importing the component I wanted to test from my root index.tsx where I exported all components for rollup to build into my publishable library.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ThemeProvider } from "./components";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

export * from "./components";

The issue was that I tried to import the component from the index.js file into my jest test before the createRoot resolved so the root and the component didn't exist at the time of my import.

import { RadioButtonGroup } from "../";

By importing the component a directory down, I was able to resolve this issue:

import { RadioButtonGroup } from "../components";

Collectives™ on Stack Overflow

Target container is not a DOM element react testing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related