酵素テストの問題が返されない

Question

{mount}メソッドを使用して私のReactクラスコンポーネントを単体テストしようとしています。クラス変数にアクセスしようとすると（このキーワードを使用して）、テストを実行すると定義されていないエラーが発生します。その後、コンポーネントの状態としてmount(<GridComponent recordArr=[1,2,3] />

 

    export class GridComponent extends React.Component { 
     constructor(props) { 
     super(props) 

     this.state = { 
      pageRecords: [], 
      totalSize: 0 
     } 
     this.options = { 
      page: 1, 
      sizePerPage: 10 
     } 
     this.DataSource = [] //All records will be stored here 
     } 

     componentDidMount() { 
     this.DataSource = this.props.recordArr 
     this.parseProps() 
     } 

     componentWillReceiveProps(nextProps) { 
     this.DataSource = nextProps.recordArr 
     this.parseProps() 
     } 

     parseProps =() => { 
     let pageRecords = [] 
     if (!_.isEmpty(this.DataSource)) { //this.DataSource ==> undefined 
      let startIndex = (this.options.page - 1) * this.options.sizePerPage 
      let count = (this.options.page - 1) * this.options.sizePerPage + this.options.sizePerPage 
      pageRecords = _.slice(this.DataSource, startIndex, count) 
     } 
     this.setState({ 
      ...this.state, 
      pageRecords: pageRecords, 
      totalSize: this.DataSource.length 
     }) 
     } 

     render() { 
     ... //Render the records from this.state.pageRecords 
     } 
    } 

Answer 1

変更this.DataSourceを呼び出し、後this.DataSourceはundefinedに評価ところ、以下の実施例は、テストケースには、Enzyme util setState function:を使用しています。

wrapper.setState({ DataSource: 'somesource' }); 

たとえば、コンポーネントのcomponentWillReceivePropsメソッドは次のようになります。

componentWillReceiveProps(nextProps) { 
    this.setState({ 
    DataSource: nextProps.recordArr, 
    }); 
    this.parseProps() 
}