All geek questions in one place

Failed to start test case. Invariant violation: _registerComponent (...): the container object is not a DOM element

I am trying to check the rendering of my responsive component, but I get the following error: Invariant violation: _registerComponent (...): the container object is not a DOM element. The error does not exist if I change the place where I need to make my component to document.body, and it exists if this place is some div with some id in the body. Here is my component:

import React, {Component} from 'react';
{render} from 'react-dom';
import Demo from './demo/demo'
import Demo2 from  './demo2/demo2'
require('./app-styles.sass')

export class App extends Component {
render() {
    return (
           <div>
               <Demo2 />
               <Demo />
               <div>Hello jest from react</div>
           </div>
       );
   }
}
render(<App/>, document.getElementById('helloWorldRoot'));

Here is a test of this component

import React from 'react'
import {shallow, mount} from 'enzyme'
import {App} from './app'

describe('base component', () => {
  it('renders as a div', () => {
    const application = shallow(<App />);
    expect(application).toMatchSnapshot();
  });
});

And here is my html:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Hello jests' tests</title>
      <link rel="stylesheet" href="dist/app.css">
    </head>

    <body>
      <div id="helloWorldRoot"></div>
      <script type="text/javascript" src="dist/app.js"></script>
    </body>

Who can tell me what could be the problem? I will be happy with some advice.

PS The test is written by a gesture. Sorry for my english.

+6
1

app.js DOM helloWorldRoot . DOM , Enzyme - , .

, <App /> . , , DOM ( main.js), . app.js Jest Enzyme.

main.js :

import React from 'react';
import { render } from 'react-dom';
import App from './app';

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

, , app.js.

+2

Source: https://habr.com/ru/post/1016729/

More articles:


All Articles