내가 아래의 구성 요소를 테스트하기 위해 효소를 사용하고

Question

소품을 통과 효소 단위 테스트를 반응 나는 다음과 같은 오류 얻을 :

selectedAccount: props.accounts[0].id 
TypeError: Cannot read property '0' of undefined 

을 selectedAccount가에 아래 구성 요소에서 볼 수 있듯이 단위 테스트에서 설정 한 소품에서 값을 얻은 상태입니다. 내 테스트에서

class Modal extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedAccount: props.accounts[0].id 
    }; 
    } 

    render() { 
    const {selectedAccount} = this.state; 

    return <div> 
       <p> 
       {selectedAccount} 
       </p> 
     </div>; 
    } 

나는 상태에서 "selectedAccount"변수 를 설정 소품을 전달하고있다. 다음은

내 테스트입니다 : 상태가 ID와 DESC 속성이있는 계정의 배열을 포함 내가 통과하고있어 소품에서 설정되지 않는 이유는

test.only('components/Modal: renders elements', t => { 

    const defaultProps = { accounts: [{ 
     id: 1, desc: 'account1' 
     }, { 
     id: 2, desc: 'account2' 
     } 
    ]} 

    const wrapper = shallow(
     <Modal/> 
).setProps(defaultProps); 

    const test = wrapper.find('p'); 
    t.equal(test.length, 1, 'should render 1 p element '); 
    t.end(); 

}); 

?

Answer 1

.setProps()은 속성을 주입하고 다시 렌더링합니다. 이것은 시간이 지남에 따라 속성을 변경하는 것입니다. 해당 속성을 건설하는 동안 사용할 수있게하려면 다음과 같이 익숙한 속성으로 전달하십시오.

const wrapper = shallow(
    <Modal accounts={defaultProps.accounts} /> 
)