Javascript Ezyme/Jest测试错误-不变冲突：目标容器不是DOM元素

我刚开始做单元测试，不断地遇到错误：不变冲突：目标容器不是DOM元素。我认为这与我的app.js的结构方式有关，因为它一直引用这一行ReactDOM.render（，document.getElementById（'app'））；。下面是它现在的结构：

import React from 'react';
import ReactDOM from 'react-dom';
import HomePage from './HomePage';

class App extends React.Component {
  render() {
    return (

      <div>
        <HomePage />
      </div>
    )
  }
}

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

从“React”导入React；
从“react dom”导入react dom；
从“./HomePage”导入主页；
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}
ReactDOM.render（，document.getElementById（'app'））；

---

是否需要为测试目的对其进行重组

您应该将文件的两部分分开，即组件声明和通过

ReactDom

装载到Dom中

ReactDom

与测试无关

从“React”导入React； 从“react dom”导入react dom； 从“./HomePage”导入主页

// App.jsx
import React from 'react';
import HomePage from './HomePage';

export class App extends React.Component {
  render() {
    return (

      <div>
        <HomePage />
      </div>
    )
  }
}

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';

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

//App.jsx
从“React”导入React；
从“./HomePage”导入主页；
导出类应用程序扩展React.Component{
render（）{
返回(
)
}
}
//index.jsx
从“React”导入React；
从“react dom”导入react dom；
从“/App”导入{App}；
ReactDOM.render（，document.getElementById（'app'））；

我的网页不再呈现。我如何将index.js文件导入到我的主页组件中，以便呈现所有内容？现在主页组件正在从导入应用程序。/App.js您可能应该在webpack.config中更改应用程序的入口点