title: Target container is not a DOM element react testing
body: <p>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.</p>
  <p>Here is my test file:</p>
  <pre><code>/* eslint-disable react/react-in-jsx-scope */
  /* eslint-disable no-undef */
  import { render, screen } from &quot;react-dom&quot;;
  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 = () =&gt; {
    &lt;Router&gt;
        &lt;Provider store={store}&gt;
          &lt;Header /&gt;
        &lt;/Provider&gt;
    &lt;/Router&gt;
  }
  
  describe('First page', () =&gt; {
    it('render the service name', async () =&gt; {
      render(&lt;MockHeader /&gt;);
      const headingElement = screen.getByText(/Bayawan Water District/i);
      expect(headingElement).toBeInTheDocument();
    })
  })
  </code></pre>
  <p>Here is my index.js:</p>
  <pre><code>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(
    &lt;Router&gt;
      &lt;React.StrictMode&gt;
        &lt;Provider store={store}&gt;
          &lt;App /&gt;
        &lt;/Provider&gt;
      &lt;/React.StrictMode&gt;
    &lt;/Router&gt;,
    document.getElementById('root')
  )
  </code></pre>
  <p>Here is my header.js:</p>
  <pre><code>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 (
      &lt;StyledHeader&gt;
        &lt;ServiceLogo src={GetLogo(params.svc)} alt=&quot;Logo&quot; /&gt;
        &lt;StyledTitle data-testid=&quot;header&quot;&gt;{GetHeader(params.svc)} &lt;/StyledTitle&gt;
      &lt;/StyledHeader&gt;
    )
  }
  
  export default Header
  </code></pre>