Javascript 在React中使用DOM操作库进行测试

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

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

---

我的问题是，是否有另一种方法来测试动态添加元素的事件处理，或者是否有更像React的方法来处理直接操作DOM的后处理库？

我通过直接使用DOM Api解决了这个问题

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

从“React”导入React；
从“酶”进口酶；
从'enzyme-Adapter-react-16'导入适配器；
configure（{adapter:newadapter（）}）；
函数doSomeDomManipulation（元素：元素）{
const child=document.createElement（'div'）；
添加（“某个类”）；
元素。追加子元素（子元素）；
}
类Foo扩展了React.Component{
divRef:React.reObject；
构造函数（props:{}）{
超级（道具）；
this.divRef=React.createRef（）
}
render（）{
返回；
}
componentDidMount（）{
doSomeDomManipulation（this.divRef.current！）；
}
}
描述（“Foo”，（）=>{
const root=document.createElement（'div'）；
常量包装器=酶的装载量（{
附件：根
});
它（'有一个类为“some class”的div'，（）=>{
const length=root.querySelectorAll（“某个类”）.length；
期望（长度）toBe（1）；
});
});