酶/玩笑测试错误-始终违反：目标容器不是DOM元素

Question

I'm new to doing unit testing and I keep getting the error: Invariant Violation: Target container is not a DOM element. I think it has to do with the way my app.js is structured because it keeps referencing this line ReactDOM.render(, document.getElementById('app'));. Here's how it's structured now:

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'));

Does this need to be restructured for testing purposes?

Answer 1

You should separate between the two parts of the file, the Component declaration & mounting into the Dom via ReactDom .

The ReactDom has nothing todo with tests.

import React from 'react'; import ReactDOM from 'react-dom'; import HomePage from './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'));