React ES6 클래스에서 arrow 함수를 테스트하는 방법

Question

내 React 구성 요소 내부에서 화살표 함수를 사용하여이 컨텍스트 (예 : 내 구성 요소 모양)를 바인딩하지 않도록했습니다.

class Comp extends Component { 
    _fn1 =() => {} 
    _fn2 =() => {} 
    render() { 
     return (<div></div>); 
    } 
} 

어떻게 테스트 케이스에 _fn1 및 _fn2 기능을 테스트합니까? 기능의 이러한 종류의와 연관되지 않았기 때문에 구성 요소 자체 반응, 그래서

fnStub = sandbox.stub(Comp.prototype, "_fn1"); 

을 수행 할 때 _fn가 Comp.prototype와 결합하지 않았기 때문에 그것은 일을하려고하지 않습니다. 따라서 화살표 구문을 사용하여 함수를 만들려는 경우 React에서 이러한 함수를 테스트하려면 어떻게해야합니까? 감사!

Answer 1

일반적으로이 함수가 함수 자체를 테스트하는 것이 아니라 올바른 구성 요소 상태가되었는지 테스트하는 것이 더 쉽습니다.

이

class MyComponent extends Component { 
    state = { 
     toggle: false 
    } 

    _fn1 =() => { 
     this.setState(previousState => ({ 
      toggle: !previousState.toggle 
     }); 
    } 

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

     return (
      <button onClick={this.clickHandler}> 
       Turn me {toggle ? 'on' : 'off'} 
      </button> 
    ); 
    } 
} 

내 선호하는 방법은 여기에 단위 테스트의 "단위"즉, 전체 구성 요소를 테스트하는 것입니다 것은입니다 : 예를 들어, 다음 버튼을 클릭 한 상태 변수를 전환하는 구성 요소입니다 구성 요소. 따라서 테스트는 버튼을 찾은 다음 클릭을 시뮬레이트하고 올바른 텍스트가 표시되도록합니다. 이것은 교과서 단위 테스트는 아니지만 구성 요소 테스트의 목표를 달성합니다.

사용 sinon/차이/모카/효소 :

describe('My Component',() => { 
    it('alternates text display when the button is clicked',() => { 
     const wrapper = shallow(<MyComponent />); 

     expect(wrapper).to.have.text('Turn me off'); 

     wrapper.find('button').simulate('click'); 

     expect(wrapper).to.have.text('Turn me on'); 
    }); 
});