Art*_* Z. 8 html javascript reactjs jestjs
我正在尝试测试我的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>
这里有什么问题？我很乐意提出一些建议.
您正在测试的文件app.js试图helloWorldRoot在最后一行中查找带有 ID 的 DOM 元素。当元素被酶渲染时，这个 DOM 元素不存在 - 因此出现错误消息。
要解决此问题，请将<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.