최상위 수준으로 렌더링되는 효소 구성 요소를 테스트하는 방법

Question

grommetMenu 구성 요소를 테스트하려고합니다. 그로멧 Menu 구성 요소는 절대적으로 위 치한 메뉴를 body의 자식으로 삽입 된 문서의 최상위 수준으로 렌더링합니다. 따라서 래퍼 범위 밖에서 렌더링됩니다. document.body.innerHTML (jsdom 문서 참조)으로 찾을 수 있지만 효소를 사용하여 상호 작용하고 싶습니다. 어떤 추천?

내 시험 :

const wrapper = mount(
    <MyComponent checkThis={checkThisSpy} /> 
); 
wrapper.find('.spec-menu').simulate('click'); 
console.log(document.body.innerHTML); // Shows the absolute menu inserted into the body 

이 document.body.insertBefore(drop.container, document.body.firstChild); 않습니다 그로밋의 행. https://github.com/grommet/grommet/blob/master/src/js/utils/Drop.js#L197

이 문제를 해결하는 가장 좋은 방법에 대한 지침을 찾고 있습니다. 감사!

Answer 1

궁극적으로 우리는 효소 자체를 사용하여 성분을 테스트 할 수있는 방법을 찾지 못했습니다. dom을 제공하기 위해 jsdom을 사용하기 때문에 document이 전 세계적으로 사용 가능합니다. 우리는 결국 약간의 기대를 작성하게되었습니다.

expect(document.getElementsByClassName('my-top-level')).to.have.length(1) 

일반 DOM API는 우리가 원하는 모든 것을 테스트하기에 충분하지만, 조금 까다 롭습니다.