Как проверить функцию стрелки в классе React ES6

Question

Я использовал функцию стрелки внутри моего компонента React, чтобы избежать связывания этого контекста, например, мой компонент выглядит следующим образом;

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

Как проверить _fn1 и _fn2 функцию в моих тестах? Потому что такого рода функции не связанные непосредственно с компонентом React, поэтому, когда я

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/Chai/мокко/фермент:

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'); 
    }); 
});