测试套件无法运行。不变违规：_registerComponent(...)：目标容器不是 DOM 元素
Posted
技术标签:
【中文标题】测试套件无法运行。不变违规：_registerComponent(...)：目标容器不是 DOM 元素【英文标题】：Test suite failed to run. Invariant Violation: _registerComponent(...): Target container is not a DOM element 【发布时间】：2017-09-21 06:12:21 【问题描述】：我正在尝试测试我的 react 组件的渲染，但出现以下错误： 不变违规：_registerComponent(...)：目标容器不是 DOM 元素。 如果我更改以下在 document.body 上渲染我的组件的位置，则错误不存在，并且如果该位置是某个 div 并且在 body 中有一些 id，则它存在。
这是我的组件：
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>
这里有什么问题？ 我很乐意提供一些建议。
【问题讨论】：
【参考方案1】：您的文件可能是这样的：
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>
【讨论】：
【参考方案2】：我在运行 jest 时收到了同样的错误。
如果您将 jest 从主要版本 21 更新到 22，则会弹出此错误等。为了修复，简单地删除 node_modules 将无济于事。在搜索了文档和问题之后（现在我不记得我在问题部分看到它的位置了），我读到：
删除yarn.lock 文件并尝试重新安装。
这个，只有这个，对我有用。希望这对某人有帮助！
【讨论】：
【参考方案3】：您正在测试的文件 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中删除相应的行。
【讨论】：
谢谢你的回答，但是，对不起，我不明白它是如何工作的“将 组件和渲染成两个文件”，甚至它应该如何工作看起来像。你能给我写一个你的想法的小例子吗？以上是关于测试套件无法运行。不变违规：_registerComponent(...)：目标容器不是 DOM 元素的主要内容，如果未能解决你的问题，请参考以下文章
错误：不变违规：Store.__emitChange()：必须在调度时调用