在 React 中使用 DOM 操作庫進行測試

Question

我使用 OpenSheetMusikDisplay 庫和 React，它可以在目標下方動態添加一些元素到 DOM。 我使用 div 的 ref 作為目標元素，效果很好。 我自己需要根據庫狀態向 DOM 添加其他元素。 基本上，我用一些 div 覆蓋渲染的工作表，這些 div 需要是庫為正確定位而添加的元素之一的子元素。

我想使用 Enzyme 測試這個組件，但找到覆蓋層的唯一包裝器是 Cheerio，據我所知，它不支持觸發輸入事件。 可以點擊疊加層，所以我需要對這種行為進行測試。

我的問題是是否有另一種方法來測試動態添加元素的事件處理，或者是否有更多類似 React 的方法來處理直接操作 DOM 的后處理庫？

Answer 1

我是直接用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);
  });
});