16 진수 16

Question

에 에 setState()을 호출하면 다시 렌더링을 트리거하는 구성 요소가 있습니다. 다음 샘플 코드 :

import React from 'react' 

class MyComponent extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     message: 'Hello' 
    } 
    } 

    componentDidMount() { 
    this.fetchMessage().then((message) => { 
     this.setState({ message }) 
    }) 
    } 

    fetchMessage() { 
    return Promise.resolve('World') 
    } 

    render() { 
    return this.state.message 
    } 
} 

내 시험은 다음과 같이이다 :

import MyComponent from './MyComponent' 
import { shallow } from 'enzyme' 

describe('<MyComponent>',() => { 
    it('renders World',() => { 
    const wrapper = shallow(<MyComponent />) 
    expect(wrapper.text()).toEqual('World') # => results shows Hello 
    }) 
}) 

내가 내 테스트를 지원하기 위해 enzyme을 사용하고, 유의하시기 바랍니다.

반환 된 결과가 초기 렌더링 인 Hello이기 때문에 테스트가 실패했습니다.

내 질문은 여기서 어설 션을 수행하기 전에 다시 렌더링이 트리거되었는지 확인하는 방법입니다.

Answer 1

여보세요,

당신은 당신이 lifeCycleMethod을 테스트하려는 경우 mount을 사용해야합니다.

setState가 비동기이므로 this.fetchMessage에 시간이 걸리면 렌더링 및 테스트에서 아름다운 경쟁 조건이 발생합니다.

이렇게하려면 렌더링을 상태 비 저장 함수로 추출해보십시오.