2017-08-18 14 views
0

把握したいことが3つあります。今のところ私は浅いレンダリングを使用しています。私は酵素と害虫を使用します。浅い試験React branch Jest and Enzyme

  1. 私はReactコンポーネントのブランチをどのようにテストできるのでしょうか。 I は、if-elseステートメント(?:)の両側をテストしたいと考えています。そして私は はそれ自身の機能でそれを引き出したくありません。
  2. 入力が変更された場合、this.props.myFuncFromProps(value)が と呼ばれているかどうかを確認するにはどうすればよいですか?
  3. mapStateToPropsと mapDispatchToPropsをテストするベストプラクティスは何ですか?ここで

私のコンポーネントは次のようになります方法の例です:ちょうど異なる属性を使用してコンポーネントをレンダリングし、スナップショット(メモしておき異なる状態をテストするには

import React from 'react'; 
 
import MyChildComponent from 'wherever'; // This component is an input field in this example 
 

 
export class MyComponent extends React.Component { 
 
    render() { 
 
    const myFunc(value) { 
 
     this.props.myFuncFromProps(value); 
 
    } 
 
    
 
    return (
 
     <div> 
 
     { this.props.isTrue ? 
 
      <MyChildComponent 
 
      value={this.props.value} 
 
      onChange={(value) => myFunc(value)} 
 
      /> 
 
      : null 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
}

答えて

0

スナップショットが初めて作成されたときに確認する必要があります)。イベントコールバックをテストするには、スパイ関数(jest.fn())をコンポーネントに渡し、simulateを使用してイベントを呼び出し、スパイが呼び出されたことをテストする必要があります。

describe('MyComponent',() => { 
    describe('with isTrue is true',() => { 
     let myComponent 
     let myFuncFromProps 
     beforeEach(() => { 
      myFuncFromProps = jest.fn() 
      myComponent = shallow(
       <MyComponent isTrue myFuncFromProps={myFuncFromProps} /> 
      ) 
     }) 
     it('renders correct',() => { 
      expect(myComponent).matchSnapshot() 
     }) 

     it('onchange will call myFuncFromProps',() => { 
      myComponent 
       .find('MyChildComponent') 
       .simulate('onChange', 'someValue') 
      expect(myFuncFromProps).toHaveBeenCalledWith('someValue') 
     }) 
    }) 

    it('with isTrue is false it renders correct',() => { 
     const myComponent = shallow(<MyComponent />) 
     expect(myComponent).matchSnapshot() 
    }) 
}) 
関連する問題