酶/笑话测试错误 - 不变违规：目标容器不是 DOM 元素

Question

我刚开始进行单元测试，但一直收到错误消息：Invariant Violation: Target container is not a DOM element。我认为这与我的 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'));

出于测试目的是否需要对其进行重组？

Answer 1

您应该将文件的两个部分分开，组件声明和通过ReactDom 安装到 Dom 中。

ReactDom 与测试无关。

从“反应”导入反应； 从 'react-dom' 导入 ReactDOM； 从'./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'));