Ошибка target container is not a dom element

The target container is not a DOM element test and is a typical React error when developers introduce the build script before the root element. But, unfortunately, the codesandbox target container is not a DOM element bug that can affect your React script if it includes an incorrect configuring web pack file, which confuses your system.

Henceforth, we wrote this profound target container is not a DOM element react testing-library article to help developers face this obstacle in their programming experience.

This is the most sophisticated guide because it recreates this uncaught error, provides debugging techniques, and helps developers locate the possible culprits, so keep reading for more.

Why the System Launches the Target Container Is Not a DOM Element Bug?

Your system launches the target container is not a DOM element. React jest error when the build script appears before the room element. Moreover, our developers confirmed an identical error when your document contains an incorrect configuring web pack file, confusing your system due to a lack of fair values.

Unfortunately, this mistake will affect straightforward and complex syntaxes unless developers introduce all build scripts before the closing body tag. As a result, our experts provide several invalid scripts and syntaxes that recreate this mistake to help you locate the culprit and pinpoint the incorrect element.

Although the target container is not a DOM element react 18 error does not have a challenging structure, it can obliterate your document and halt further operations. However, another possible cause for the target container is not a DOM element. nextJS mistake exists, as explained below.

Namely, several developers reported this error when they passed an invalid ID of the HTML div element to the getElementByID method. Although implementing this method in your script should not cause the target container is not a DOM element. storybook bug can appear if your unique identification is invalid or has incorrect paths.

But, as explained before, learning about the syntaxes that launch the unmountcomponentatnode target container is not a DOM element error is essential when pinpointing the possible cause.

– Using React Load Static Files

Experiencing this bug with short scripts discourages less experienced developers because they believe everything is fine with the code. Unfortunately, this is not the case even if users have double-checked all elements and commands.

As a result, we will show you a simple HTML code that introduces a React load static file. Readers can confirm the HTML script only has simple elements and tags and a few attributes inside the opening tags.

The following example provides the HTML code:

This example confirms the HTML syntax is correct and no element launches a mistake. However, JavaScript is more complex because it includes more commands and functions, and the build script exists before the root element. Hence, the system launches this mistake that provides for other indicators and locations.

Readers can learn more about the exception message in the following example:

Attempting to debug this bug without reading this guide will lead you nowhere because the debugging principles follow a specific structure. However, our experts will provide other instances where developers might experience this mistake.

– The Build Script Exists Before the Root Element

Our experts confirmed that the lack of proper build script location is this error’s definitive cause. So, less skillful programmers usually write this script before the root element, which confuses the system because it cannot render the functions correctly.

As a result, it launches the error, discouraging users because they cannot fix it. Luckily, you are at the right place.

But first, let us learn about the next example that recreates this bug:

Programmers cannot use this HTML index structure because it loads the scripts before the root element and tags. Fortunately, debugging this error is straightforward, as you will soon learn.

Now, let us discover another instance where developers experience this annoying exception in their React projects and HTML documents by opening the public directory.

– The File Exists in a Public Directory

Developers are guaranteed to face this mistake when writing the index HTML document in a public directory of the React project. Unfortunately, this is invalid and launches an error because the unique identifiers in both documents differ.

Our team believes beginners make this error because they use template files on the React 18 documentation page while launching the project with a creative application.

The following code recreates this annoying exception:

We will now provide the general index HTML file with a unique identifier that acts as a root. So, the following example completes this syntax:

After learning about the invalid scripts, it is time to discover the debugging principles.

Target Container Is Not a DOM Element: 2 Profound Solutions

Writing and loading the scripts after the root element are the best solutions to this target container is not a DOM element error. So, developers and programmers must first locate the main feature, delete the scripts, and include them after the root closing tag.



We will use the same example, including correct values and element positions. Read the following example to fix your script:

As you can tell, although a few minor differences exist, we have kept the script the same. Still, it is correct and will not launch a mistake.

Fortunately, other advanced debugging methods and principles help developers clear their scripts.

– Using Identical Unique Identifiers Specified in the Index

Writing identical unique identifiers specified in the HTML index file is another full-proof debugging principle that clears your document. For instance, programmers must ensure the ID that selects the element is the same ID that they have specified in the HTML file and place the script below.

We declared the div element with identical unique identifiers in this example:

So, programmers must use the root identifier when selecting this element in the index JavaScript. Readers can learn how to do this in the following example:

This script completes our comprehensive debugging guide.

Conclusion

Our team confirmed passing an incorrect unique identifier and misplacing the React script commands are the two culprits for this mistake. Luckily, this guide explained many essential points covered in the following bullet list, so let us remember the details:

• This mistake affects long and short HTML and JavaScript documents
• Although the invalid exception is straightforward, pinpointing the error is sometimes challenging
• This article recreates the bug using several standard examples
• Following the debugging principles from this article will help you enable the script without further complications

We assure beginners and novice developers to clear their documents from this bug because this guide has all they need. So, discover the elements, paste them into your file, and complete your project.

Answer by Roman Henderson

App.jsx is supposed to export the App class and do nothing more, render should be called elsewhere.,In my case, I was exporting an object within my index.js where I was also calling ReactDOM.render. I removed this export and voila! ,A small note before you go. Here is how to use the default and the non-default exports.

As I see, this error arises in many cases and requires different approaches to solve it. My scenario is not the same as the example above, I use redux & router, although I was struggling with the same error. What helped me to solve this problem is to change index.js from:

ReactDOM.render(
  <Provider store={store}>
    <AppRouter />
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

to:

ReactDOM.render(
    (<Provider store={store}>
        <AppRouter/>
    </Provider>),
     document.getElementById('root') || document.createElement('div') // for testing purposes
);
registerServiceWorker();

Answer by Kingston Price

For anyone else that was combing through the internet like I’ve been — looking for a solution to this when testing with Jest — I will back up the answer by @biphobe by saying Jest will cause this error to occur when you export something inside the same file that is calling ReactDOM.render. ,As I see, this error arises in many cases and requires different approaches to solve it. My scenario is not the same as the example above, I use redux & router, although I was struggling with the same error. What helped me to solve this problem is to change index.js from:,In my case, I was exporting an object within my index.js where I was also calling ReactDOM.render. I removed this export and voila!

As I see, this error arises in many cases and requires different approaches to solve it. My scenario is not the same as the example above, I use redux & router, although I was struggling with the same error. What helped me to solve this problem is to change index.js from:

ReactDOM.render(
  <Provider store={store}>
    <AppRouter />
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

to:

ReactDOM.render(
    (<Provider store={store}>
        <AppRouter/>
    </Provider>),
     document.getElementById('root') || document.createElement('div') // for testing purposes
);
registerServiceWorker();

Answer by Ariana Velasquez

The initial code that didn’t work when testing React looked like this.,
default export store; is used with import store from «./store»;
,
export const store = … is used with import { store } from «./store»;

The initial code that didn’t work when testing React looked like this.

// index.tsx

import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose, createStore } from "redux";
import App from "./components/App";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";

const middlewares = [];

export const store = createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middlewares)),
);

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root"),
);

Separate the Redux store logic into a new file named store.ts, then create a default export (to be used by index.tsx, i.e., the React application) and a non-default export with export const store (to be used from non-React classes), as follows.

// store.ts

import { applyMiddleware, compose, createStore } from "redux";
import logger from "redux-logger";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";

const middlewares = [];

export const store = createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middlewares)),
);

export default store;

// updated index.tsx

import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
import store from "./store";

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root"),
);

// MyClass.ts

import { store } from "./store"; // store.ts

export default class MyClass {
  handleClick() {
    store.dispatch({ ...new SomeAction() });
  }
}

Answer by Ezequiel Rasmussen

I’m attempting to test a React component with Jest/Enzyme while using Webpack.,Invariant Violation: _registerComponent(…): Target container is not a DOM element.,https://nono.ma/says/solved-invariant-violation-target-container-is-not-a-dom-element

I have a very simple test @

import React from 'react';
import { shallow } from 'enzyme';

import App from './App';

it('App', () => {
  const app = shallow(<App />);
  expect(1).toEqual(1);
});

The relative component it’s picking up is :

import React, { Component } from 'react';
import { render } from 'react-dom';

// import './styles/normalize.css';

class App extends Component {
  render() {
    return (
      <div>app</div>
    );
  }
}

render(<App />, document.getElementById('app'));

For those interested (Webpack code):

module.exports = {
  entry: './src/App',
  output: {
    filename: 'bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {
        test: /.js?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /.css$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
      },
      {
        test: /.scss$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'
      }
    ]
  }
}

And my package.json:

{
  "name": "tic-tac-dux",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --inline --hot --content-base dist/",
    "test": "jest"
  },
  "jest": {
    "moduleNameMapper": {
      "^.+.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "^.+.(css|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-jest": "^16.0.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "enzyme": "^2.4.1",
    "jest": "^16.0.1",
    "jest-cli": "^16.0.1",
    "node-sass": "^3.10.1",
    "react-addons-test-utils": "^15.3.2",
    "react-dom": "^15.3.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

Oh, and if anyone is going to say that the div element isn’t being loaded before the script, here’s my index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

Answer by Hendrix Morris

React throws the error, target container is not a dom element, when we include the build script before the root element. The solution is to always include the build scripts before body closing tag </body>.,This file will create target container is not a dom element error because our scripts are loaded before out root element.,I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

Suppose the html structure of index.html is –

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="/manifest.json" />
    <title>Error Template</title>
    <link href="/static/css/2.10306419.chunk.css" rel="stylesheet" />
    <link href="/static/css/main.1b589238.chunk.css" rel="stylesheet" />
    <script src="/static/js/2.537e346a.chunk.js"></script>
    <script src="/static/js/main.119c9f53.chunk.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

The correct way is –

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="/manifest.json" />
    <title>Error Template</title>
    <link href="/static/css/2.10306419.chunk.css" rel="stylesheet" />
    <link href="/static/css/main.1b589238.chunk.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/static/js/2.537e346a.chunk.js"></script>
    <script src="/static/js/main.119c9f53.chunk.js"></script>
  </body>
</html>

Now you can use it in your App.js or index.js files –

ReactDOM.render(
  <MyComponent />,
  document.getElementById("root")
);

Answer by Dillon Kennedy

Answer by Opal Reid

React testing error: Target container is not a DOM element
,
React testing error: Target container is not a DOM element ,

TypeError: is not a function — in simple react component

Answer by Madeline Dominguez

I know that the problem becomes from the last part of code (ReactDOM.render) but i don’t know with certainty what is it.,All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:,I am a beginner with js and react and i try in my environment to recreate a chart.

I have everything I need (package, react, etc) but I can’t make it work the example code.

Answer by Keenan Mercado

note: in old tutorials you may see import of react-testing-library/cleanup this is no longer required as the beforeEach and afterEach are automatically registered now,when using react-testing-library we can start by importing render and use it instead of ReactDOM,Using react-dom we have code like this to test a react component

Using react-dom we have code like this to test a react component

import React from "react";
import ReactDOM from "react-dom";

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

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

/* ######## setup code above ######## */

function App() {
  return (
    <div>
      <h1>Hello!</h1>
    </div>
  );
}

test("render app", () => {
  ReactDOM.render(<App />, container);
  expect(document.querySelector("h1").textContent).toBe("Hello!");
});

when using react-testing-library we can start by importing render and use it instead of ReactDOM

  import React from 'react'
  import ReactDOM from 'react-dom'
+ import { render } from '@testing-library/react'

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

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

  /* ######## setup code above ######## */

  function App() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    )
  }

  test('render app', () => {
-   ReactDOM.render(<App />, container)
+   render(<App />)
    expect(document.querySelector('h1').textContent).toBe('Hello!')
  })

  import React from 'react'
- import ReactDOM from 'react-dom'
  import { render } from '@testing-library/react'
-
- let container = null
- beforeEach(() => {
-   // setup a DOM element as a render target
-   container = document.createElement('div')
-   document.body.appendChild(container)
- })
-
- afterEach(() => {
-   // cleanup on exiting
-   ReactDOM.unmountComponentAtNode(container)
-   container.remove()
-   container = null
- })
-
- /* ######## setup code above ######## */

  function App() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    )
  }

  test('render app', () => {
    render(<App />)
    expect(document.querySelector('h1').textContent).toBe('Hello!')
  })

Comments

Answer by Roman Henderson

App.jsx is supposed to export the App class and do nothing more, render should be called elsewhere.,In my case, I was exporting an object within my index.js where I was also calling ReactDOM.render. I removed this export and voila! ,A small note before you go. Here is how to use the default and the non-default exports.

As I see, this error arises in many cases and requires different approaches to solve it. My scenario is not the same as the example above, I use redux & router, although I was struggling with the same error. What helped me to solve this problem is to change index.js from:

ReactDOM.render(
  <Provider store={store}>
    <AppRouter />
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

to:

ReactDOM.render(
    (<Provider store={store}>
        <AppRouter/>
    </Provider>),
     document.getElementById('root') || document.createElement('div') // for testing purposes
);
registerServiceWorker();

Answer by Kingston Price

For anyone else that was combing through the internet like I’ve been — looking for a solution to this when testing with Jest — I will back up the answer by @biphobe by saying Jest will cause this error to occur when you export something inside the same file that is calling ReactDOM.render. ,As I see, this error arises in many cases and requires different approaches to solve it. My scenario is not the same as the example above, I use redux & router, although I was struggling with the same error. What helped me to solve this problem is to change index.js from:,In my case, I was exporting an object within my index.js where I was also calling ReactDOM.render. I removed this export and voila!

As I see, this error arises in many cases and requires different approaches to solve it. My scenario is not the same as the example above, I use redux & router, although I was struggling with the same error. What helped me to solve this problem is to change index.js from:

ReactDOM.render(
  <Provider store={store}>
    <AppRouter />
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

to:

ReactDOM.render(
    (<Provider store={store}>
        <AppRouter/>
    </Provider>),
     document.getElementById('root') || document.createElement('div') // for testing purposes
);
registerServiceWorker();

Answer by Ariana Velasquez

The initial code that didn’t work when testing React looked like this.,
default export store; is used with import store from «./store»;
,
export const store = … is used with import { store } from «./store»;

The initial code that didn’t work when testing React looked like this.

// index.tsx

import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose, createStore } from "redux";
import App from "./components/App";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";

const middlewares = [];

export const store = createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middlewares)),
);

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root"),
);

Separate the Redux store logic into a new file named store.ts, then create a default export (to be used by index.tsx, i.e., the React application) and a non-default export with export const store (to be used from non-React classes), as follows.

// store.ts

import { applyMiddleware, compose, createStore } from "redux";
import logger from "redux-logger";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";

const middlewares = [];

export const store = createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middlewares)),
);

export default store;

// updated index.tsx

import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
import store from "./store";

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root"),
);

// MyClass.ts

import { store } from "./store"; // store.ts

export default class MyClass {
  handleClick() {
    store.dispatch({ ...new SomeAction() });
  }
}

Answer by Ezequiel Rasmussen

I’m attempting to test a React component with Jest/Enzyme while using Webpack.,Invariant Violation: _registerComponent(…): Target container is not a DOM element.,https://nono.ma/says/solved-invariant-violation-target-container-is-not-a-dom-element

I have a very simple test @

import React from 'react';
import { shallow } from 'enzyme';

import App from './App';

it('App', () => {
  const app = shallow(<App />);
  expect(1).toEqual(1);
});

The relative component it’s picking up is :

import React, { Component } from 'react';
import { render } from 'react-dom';

// import './styles/normalize.css';

class App extends Component {
  render() {
    return (
      <div>app</div>
    );
  }
}

render(<App />, document.getElementById('app'));

For those interested (Webpack code):

module.exports = {
  entry: './src/App',
  output: {
    filename: 'bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {
        test: /.js?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /.css$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
      },
      {
        test: /.scss$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'
      }
    ]
  }
}

And my package.json:

{
  "name": "tic-tac-dux",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --inline --hot --content-base dist/",
    "test": "jest"
  },
  "jest": {
    "moduleNameMapper": {
      "^.+.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "^.+.(css|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-jest": "^16.0.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "enzyme": "^2.4.1",
    "jest": "^16.0.1",
    "jest-cli": "^16.0.1",
    "node-sass": "^3.10.1",
    "react-addons-test-utils": "^15.3.2",
    "react-dom": "^15.3.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

Oh, and if anyone is going to say that the div element isn’t being loaded before the script, here’s my index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

Answer by Hendrix Morris

React throws the error, target container is not a dom element, when we include the build script before the root element. The solution is to always include the build scripts before body closing tag </body>.,This file will create target container is not a dom element error because our scripts are loaded before out root element.,I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

Suppose the html structure of index.html is –

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="/manifest.json" />
    <title>Error Template</title>
    <link href="/static/css/2.10306419.chunk.css" rel="stylesheet" />
    <link href="/static/css/main.1b589238.chunk.css" rel="stylesheet" />
    <script src="/static/js/2.537e346a.chunk.js"></script>
    <script src="/static/js/main.119c9f53.chunk.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

The correct way is –

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="/manifest.json" />
    <title>Error Template</title>
    <link href="/static/css/2.10306419.chunk.css" rel="stylesheet" />
    <link href="/static/css/main.1b589238.chunk.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/static/js/2.537e346a.chunk.js"></script>
    <script src="/static/js/main.119c9f53.chunk.js"></script>
  </body>
</html>

Now you can use it in your App.js or index.js files –

ReactDOM.render(
  <MyComponent />,
  document.getElementById("root")
);

Answer by Dillon Kennedy

Answer by Opal Reid

React testing error: Target container is not a DOM element
,
React testing error: Target container is not a DOM element ,

TypeError: is not a function — in simple react component

Answer by Madeline Dominguez

I know that the problem becomes from the last part of code (ReactDOM.render) but i don’t know with certainty what is it.,All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:,I am a beginner with js and react and i try in my environment to recreate a chart.

I have everything I need (package, react, etc) but I can’t make it work the example code.

Answer by Keenan Mercado

note: in old tutorials you may see import of react-testing-library/cleanup this is no longer required as the beforeEach and afterEach are automatically registered now,when using react-testing-library we can start by importing render and use it instead of ReactDOM,Using react-dom we have code like this to test a react component

Using react-dom we have code like this to test a react component

import React from "react";
import ReactDOM from "react-dom";

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

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

/* ######## setup code above ######## */

function App() {
  return (
    <div>
      <h1>Hello!</h1>
    </div>
  );
}

test("render app", () => {
  ReactDOM.render(<App />, container);
  expect(document.querySelector("h1").textContent).toBe("Hello!");
});

when using react-testing-library we can start by importing render and use it instead of ReactDOM

  import React from 'react'
  import ReactDOM from 'react-dom'
+ import { render } from '@testing-library/react'

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

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

  /* ######## setup code above ######## */

  function App() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    )
  }

  test('render app', () => {
-   ReactDOM.render(<App />, container)
+   render(<App />)
    expect(document.querySelector('h1').textContent).toBe('Hello!')
  })

  import React from 'react'
- import ReactDOM from 'react-dom'
  import { render } from '@testing-library/react'
-
- let container = null
- beforeEach(() => {
-   // setup a DOM element as a render target
-   container = document.createElement('div')
-   document.body.appendChild(container)
- })
-
- afterEach(() => {
-   // cleanup on exiting
-   ReactDOM.unmountComponentAtNode(container)
-   container.remove()
-   container = null
- })
-
- /* ######## setup code above ######## */

  function App() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    )
  }

  test('render app', () => {
    render(<App />)
    expect(document.querySelector('h1').textContent).toBe('Hello!')
  })

Comments

As part of an unintentional bump of the storybook version in
e8f9c1d it would no longer run
correctly.

The issue was already reported and relates to our webpack config
derived from CRA. storybookjs/storybook#2615

As part of an unintentional bump of the storybook version in
e8f9c1d it would no longer run
correctly.

The issue was already reported and relates to our webpack config
derived from CRA. storybookjs/storybook#2615

As part of an unintentional bump of the storybook version in
e8f9c1d it would no longer run
correctly.

The issue was already reported and relates to our webpack config
derived from CRA. storybookjs/storybook#2615