How to fix “Target Container is not a DOM element” error in Jest unit tests

Background

Not long ago, a question was asked by one of our learners regarding how to fix the "Target Container is not a DOM element" error encountered during a React/Jest unit test run. After guiding the learner on how to fix the issue, I decided to document the solution to aid others who might encounter the same error in the future.

Introduction

This tutorial demonstrates the likely cause of the “Target Container is not a DOM element” error in React/Jest unit tests, and how to fix the issue.

Let’s get started.

Pre-requisite:

• Basic knowledge of Javascript and React is required
• A computer system with Node.js runtime engine installed
• Proficient in the use of any modern code editors i.e. VS Code

Likely cause of the “Target Container is not a DOM element” error

If you are seeing this error after running npm test, it is likely that you are exporting an object within the “ index.js” file where the ReactDOM.render instantiated.

For example, this error would occur if the 'index.js' file looks like the below in your project:

export const store = configureStore({
  reducer: TodoSclie,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
);

In the above code snippet, the store object is been exported in the 'index.js' file where the ReactDOM.render is instantiated. So this would cause the Jest unit test to failed, and log out the “Target Container is not a DOM element” error.

How to fix

Move the store logic out of the 'index.js' file and place it somewhere else e.g. create a store.js file and place it there. Then go back to 'index.js' and import the store object. The 'index.js' file should look like the below after making the change.

import { store } from "./store"; 
const root = ReactDOM.createRoot(document.getElementById("root")); 
root.render( <BrowserRouter>
 <Provider store={store}> <App /> 
</Provider> 
</BrowserRouter> );

Re-run npm test again, the error should be gone and unit test(s) pass if there are no other issues.

That’s how simple it's to fix the “Target Container is not a DOM element” error in React/Jest unit tests.

I hope this helps! Go to the contact page and let me know if you have any further questions.

Happy coding!