Question

我正在尝试测试我的反应组件的渲染，但是得到以下错误： 不变违规：_registerComponent（...）：目标容器不是DOM元素。 如果我在document.body上更改后面的地方渲染我的组件，则不存在错误，如果这个地方是一个在主体中有一些id的div，则存在错误。

这是我的组件：

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

测试该组件：

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();
  });
});

这是我的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>

这是什么问题？我很乐意提出一些建议。

Answer 1

您正在测试的文件app.js正在尝试在最后一行中找到ID为helloWorldRoot的DOM元素。当元素由Enzyme呈现时，这个DOM元素不存在 - 因此出现错误信息。

要解决此问题，请将<App />组件分离并将其呈现为两个文件。确保将应用程序安装到DOM的文件（让我们称之为main.js）只执行这一项而不做其他事情。然后可以使用Jest和Enzyme测试另一个文件app.js。

所以main.js应该不会超过：

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

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

当然应该从app.js删除相应的行。

Answer 2

我在运行jest时收到了同样的错误如果您将主要版本21中的jest更新为22，则会弹出此错误等。为了解决问题，只需删除node_modules即可获得帮助。在搜索了文档和问题之后（现在我不记得我在问题部分看到的地方），我读到：

删除yarn.lock文件并尝试重新安装。

这个，只有这个，对我有用。希望这有助于某人！

Answer 3

以下是您的文件的格式：

index.js

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

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

App.js

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

App.test.js

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();
  });
});

index.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>

测试套件无法运行。不变违规：_registerComponent（...）：目标容器不是DOM元素

3 个答案: