사업부를 시뮬레이션하십시오. 효소와 반응을 클릭하십시오.

Question

저는 효소를 배우고 있으며, 팀이 작성한 응용 프로그램에 몇 가지 테스트를 작성하기 시작했습니다. 요소를 클릭하여 시뮬레이션하려고합니다. 응용 프로그램에는 기본적으로 목록이 있으며 클릭 할 때마다 (이미지) 체크 표시가 나타납니다. 다시 클릭하면 확인 표시가 나타나지 않습니다. 응용 프로그램은 요소를 클릭 할 때마다 상태를 변경하여이 작업을 수행 한 다음 요소를 렌더링 할 이미지를 결정합니다.

그것은 실제 응용 프로그램에서 작동하지만 어떻게 든 효소는 실패합니다. 효소에 대해 제가 놓친 것이 있습니까?

다음은 간단한 코드입니다. 아래

class RecipeInfo extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {}; 
    this.doneClick = this.doneClick.bind(this); 
    } 

    doneClick(event) { 
    let index = event.target.name; 
    let state = {}; 
    state[index] = !this.state[index]; 
    this.setState(state) 
    } 

    renderIngredients(ingredients) { 
    let quantities = ingredients.quantity; 
    let lines = []; 
    for(let i = 0; i < quantities.length; i++){ 
    lines.push(
     <div className='flex-body-ingredients' key={i}> 
     <div onClick={this.doneClick} id={i} > 
     {this.state[i] ? 
      (<img className='empty-check' src="/assets/success.png" alt="success" name={i} />) 
      : (<img className='empty-check' src="/assets/oval.png" name={i} alt="oval" />)} 
     </div> 
     </div> 
     ) 
    } 
    return lines.map((line) => line) 
    } 

    render() { 
    return (
     {this.renderIngredients(ingredients)} 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    recipe: state.recipes.selectedRecipe 
    } 
} 
export default connect(mapStateToProps, actions)(RecipeInfo); 

그리고 난 그냥 쓴 테스트한다 :

<div id="0"><img class="empty-check" src="/assets/oval.png" name="0" alt="oval"></div> 

: 나는 테스트를 실행, 나는 요소를 로그 콘솔 때

describe('Recipe Info',() => { 
    const recipeInfo = mount(<Provider store={createRecipeStore}><RecipeInfo/></Provider>); 

    it('shows a click and then hides the click when clicking an ingredient',() => { 
    const notChecked = recipeInfo.find('[alt="oval"]').first(); 
    expect(notChecked).toBeDefined(); 

    recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click'); 

    const checked = recipeInfo.find('[alt="success"]').first(); 
    expect(checked).toBeDefined(); 
    }); 

}); 

, 나는 다음을 참조 다음은 클래스입니다

클릭 후 변경되지 않습니다.

Answer 1

문제를 발견했습니다. 시뮬레이션에 이벤트 핸들러를 전달하지 않고있었습니다.

recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click', {target: {name: 0}}); 

:

나는로 변경했다