OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

testing the index.js file react Target container is not a DOM element

  • Thread starter Thread starter jSvSL
  • Start date Start date
J

jSvSL

Guest
I tried writing a test for this file but received the error Target container is not a DOM element. All the needed files were imported.

Code:
import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
//other files imported

const rootElement = document.getElementById('root');
ReactDOM.render(
    <AppRoot>
        <BrowserRouter>
          <title className='myAppTitle' id="myApp">MY APP</title>
          <div data-testId="index">
            <Routes>
              <Route path="/*" element={ <App /> } />
            </Routes>
          </div>
        </BrowserRouter>
    </AppRoot>
    ,
    rootElement,
);

This is the jest test I tried. I expected the test to pass. I imported all the needed imports but the test is failing at .render(). The error says Target container is not a DOM element. Is there a way to get test coverage for an index.js file of a react app?

Code:
import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
//other files imported

describe('index', () => {
    jest.mock('react-dom', ()=> ({render: jest.fn()}))
    const root = document.createElement('div');

    beforeEach(() => {
        document.body.appendChild(root);
    })
    it('should render without crashing', async () => {
       const rootElement = document.getElementById('root');
ReactDOM.render(
    <AppRoot>
        <BrowserRouter>
          <title className='myapptitle' id="myapp">MY APP</title>
          <div data-testId="index">
            <Routes>
              <Route path="/*" element={ <App /> } />
            </Routes>
          </div>
        </BrowserRouter>
    </AppRoot>
    ,
    rootElement,
);
 expect(title).toBe('My App');
 expect(document.getElementById('myApp')).toBeTruthy();
    });
})

<p>I tried writing a test for this file but received the error Target container is not a DOM element. All the needed files were imported.</p>
<pre><code>import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
//other files imported

const rootElement = document.getElementById('root');
ReactDOM.render(
<AppRoot>
<BrowserRouter>
<title className='myAppTitle' id="myApp">MY APP</title>
<div data-testId="index">
<Routes>
<Route path="/*" element={ <App /> } />
</Routes>
</div>
</BrowserRouter>
</AppRoot>
,
rootElement,
);
</code></pre>
<p>This is the jest test I tried. I expected the test to pass. I imported all the needed imports but the test is failing at .render(). The error says Target container is not a DOM element. Is there a way to get test coverage for an index.js file of a react app?</p>
<pre><code>import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
//other files imported

describe('index', () => {
jest.mock('react-dom', ()=> ({render: jest.fn()}))
const root = document.createElement('div');

beforeEach(() => {
document.body.appendChild(root);
})
it('should render without crashing', async () => {
const rootElement = document.getElementById('root');
ReactDOM.render(
<AppRoot>
<BrowserRouter>
<title className='myapptitle' id="myapp">MY APP</title>
<div data-testId="index">
<Routes>
<Route path="/*" element={ <App /> } />
</Routes>
</div>
</BrowserRouter>
</AppRoot>
,
rootElement,
);
expect(title).toBe('My App');
expect(document.getElementById('myApp')).toBeTruthy();
});
})
</code></pre>
 

Latest posts

Top