React中的DOM操作库测试

Question

我使用了一个库OpenSheetMusikDisplay和React，它可以动态地将目标下的几个元素添加到DOM中。我使用div的ref作为目标元素，这很好。我自己需要根据库的状态向DOM添加额外的元素。基本上，我用一些div覆盖渲染的工作表，这些div需要是库添加的元素之一的子元素，以便正确定位。

我想用Enzyme测试这个组件，但唯一能找到覆盖的包装器是Cheerio，据我所见，它不支持触发输入事件。覆盖层是可以点击的，所以我需要对这种行为进行测试。

我的问题是，是否有其他方法可以测试动态添加元素的事件处理，或者是否有更类似React的方法来处理直接操作DOM的后处理库？

Answer 1

我直接使用DOMApi解决了这个问题。

import React from 'react';
import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });
function doSomeDomManipulation(element: Element) {
const child = document.createElement('div');
child.classList.add("some-class");
element.appendChild(child);
}
class Foo extends React.Component<{}, {}>{
divRef: React.RefObject<HTMLDivElement>;

constructor(props: {}) {
super(props);
this.divRef = React.createRef()
}
render() { 
return <div ref={this.divRef}></div>;
}
componentDidMount() {
doSomeDomManipulation(this.divRef.current!);
}
}
describe("Foo", () => {
const root = document.createElement('div');
const wrapper = enzyme.mount(<Foo/>, {
attachTo: root
});
it('has a div with class "some-class"', () => {
const length = root.querySelectorAll("some-class").length;
expect(length).toBe(1);
});
});