시험 componentWillUnmount는() 나는 다음과 같은 코드를 사용하여 구성 요소 반응이 몸

에서 클래스를 제거 소지품). 앱이로드되면 Preloader 구성 요소가 본문으로 렌더링됩니다 (사용자에게는 변경 사항이 없음). 그리고 서버에서 데이터가 도착하면 Preloader가 제거됩니다. 물론 isPreloaded 클래스를 삭제해야합니다.이 클래스는 몸체를 스크롤 할 수 없게 만듭니다.시험 componentWillUnmount는() 나는 다음과 같은 코드를 사용하여 구성 요소 반응이 몸

위의 설명은 직접 내 질문에 연결되어 있지 않지만 "이것은 나쁜 습관"또는 이와 유사한 내용을 방지하기 위해 추가하기로 결정했습니다.

그래서이 동작을 테스트하고 싶습니다. 예상대로 작동하려면이 구성 요소를 클래스로 isPreloaded 클래스로 렌더링하고 변수에 저장해야합니다 (container). 그런 다음이 클래스가 container에 있는지 확인해야합니다. 그리고 두 번째 테스트에서는 컨테이너에서 구성 요소의 마운트를 해제하고 클래스가 사라 졌는지 확인해야합니다.

describe('<Preloader />',() => { 
    const container = mount(<body className='isPreloaded'><Preloader /></body>) 

    it('should be rendered with `isPreloaded` class',() => { 
    expect(container.find('isPreloaded').length).toBe(1) 
    }) 

    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(container).childNode) 

    it('should remove `isPreloaded` class from body when unmounted',() => { 
    expect(container.find('.isPreloaded').length).toBe(0) 
    }) 
})

을하지만이 작동하지 않습니다

이것은 내가 무엇을 달성하고자하는 약이다. 첫 번째 주장은 1 대신 0을 반환하므로 실패합니다. 두 번째는 다음과 같은 오류가 발생합니다 :

Invariant Violation: findDOMNode was called on an unmounted component.

출처

2017-01-03 Yan Takushevich

버전을 반응? – Codesingh

@Codesingh 15.4.1 –

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(container).childNode)는이 작업을 수행해야합니다 있도록 비동기 기능입니다 : -

setTimeout(function() { 
    ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(container).childNode) 
}, 3000

당신은 또한 componentWillUnmount에 리스너를 추가 할 수 있습니다(). it 문제의 사용이에 대한

let {TestUtils} = React.addons; 
this.container = TestUtils.renderIntoDocument(<body  className='isPreloaded'><Preloader /></body>) 
this.renderedDOM =() => React.findDOMNode(this.container); 

it('should be rendered with `isPreloaded` class',() => { 
    expect(this.renderedDOM().children.length).toEqual(1); 
    })

출처

2017-01-03 19:19:54 Codesingh

아마도'setImmediate' (또는'process.nextTick')를 한두 번 사용하면 충분합니다. 'setImmediate (_ => setImmediate (func))'는 호출 후 두 개의 메인 루프 사이클을'func' 실행합니다. 그때까지, 콜백은 아마 달릴 것이다. 3 초를 기다릴 필요가 없습니다. – slezica

예 이것들이 대안입니다. – Codesingh

@Codesingh 답변에 감사드립니다. 전체 예제를 제공해 주시겠습니까? 또한 첫 번째'it' 블록이 0을 반환하는 것은 무엇입니까? 어떻게해야합니까? –

시험 componentWillUnmount는() 나는 다음과 같은 코드를 사용하여 구성 요소 반응이 몸

답변

관련 문제