React 구성 요소를 테스트하기 전에 DOM을 조롱하는 방법이 있습니까?

Question

TestUtils, Enzyme 및 Jest를 사용하여 React 클래스를 테스트하려고하는데 몇 가지 해결 방법이 필요하기 때문에 서버에서 렌더링 한 HTML 페이지의 요소 (예 : 그것은 렌더링하기 전에 componentDidMount에있는 DOM으로부터 특정 요소를 가져옵니다. 예를 들어 :

componentDidMount() { 
    document.documentElement.classList.add('example'); 
    this.someOtherFunction(document.getElementsByClassName('my-great-className')) 
} 

나는이 구성 요소를 테스트하고 싶습니다하지만, 서버 렌더링 된 HTML 페이지가 테스트에 존재하지 않기 때문에 당연히 componentDidMount의 기능이 실패합니다. React 구성 요소를 렌더링하기 전에 특정 DOM을 모의 할 수있는 방법이 있습니까?

Answer 1

당신은 당신이 그럼 그냥 add는 example로 호출 된 것을 확인할 수 있습니다 테스트에서 테스트

global.document = { 
    documentElement: { 
    classList: { 
     add: jest.fn() 
    } 
    } 
    getElementsByClassName: jest.fn({id:'id'}) 
} 

를 시작하기 전에 그냥 물건을 설정할 수 있습니다 someOtherFunction 것을 {id:'id'} 호출되었습니다. 모든 테스트 파일은 자체 sandbox에서 실행되므로 완전히 위와 같은 문서를 설정할 수 있습니다.