酵素で還元された子成分の状態を取得します

Question

還元成分をテストしようとしています。コンポーネントは、resizeイベントでそのプロパティを変更します。

酵素でDatePickerコンポーネントをマウントし、サイズ変更イベントを送出し、DatePickerの支柱値IS_DESKTOP_VIEWPORT === trueをテストし、これによりDatePickerの状態も変更されました。

console.log(wrapper.find('DatePicker').state()) 
// ReactWrapper::state() can only be called on the root 

私はプロバイダなどに接続されている日付ピッカーをラップしようとしました：酵素は、ラッパーコンポーネントがルートでない場合は、状態にアクセスすることはできませんので

は、しかし、私は私の日付ピッカーの状態にアクセスすることはできませんドキュメントは、それを直接マウントするだけでなく、ストアを小道具として渡すことも示唆しています。これらのメソッドのどちらも、私がDatePickerをルートコンポーネントとして参照することはできないようで、これらのメソッドのどちらも私のコンポーネントの状態を取得することはできません。ここで

は私の試みは、以下のとおりです。これらのコンソールログの 出力はここにある：https://gist.github.com/gecko25/56fb14154585a2d06697c399685c9111

import React from 'react'; 
import { Provider } from 'react-redux'; 
import PropTypes from 'prop-types'; 
import { mount } from 'enzyme'; 
import configureDataStore from '%SRC%/store/configure'; 
import { windowResize } from '%CONSTANTS%/store/actions'; 
import ConnectedDatePicker, { DatePicker } from './DatePicker'; 

const DESKTOP = 1025; 

describe('calendar open and closes',() => { 

    test('connected attempt #1',()=>{ 

     const store = configureDataStore(); 

     const options = { 
      context: { store }, 
      childContextTypes: { store: PropTypes.object } 
     } 

     const wrapper = mount(<ConnectedDatePicker store={store}/>) 

     store.dispatch(windowResize(DESKTOP)); 

     console.log('state-->', wrapper.state()) // {} 
     console.log('props-->', wrapper.props()) // Doesn't include all my component specific props 
     console.log(wrapper.find('DatePicker').props()) // Prints all props as expected 
     console.log(wrapper.find('DatePicker').state()) // Error 

     console.log('--------------------------') 

    }) 

    test('connected attempt #2',() => { 

     const store = configureDataStore(); 

     const options = { 
      context: { store }, 
      childContextTypes: { store: PropTypes.object } 
     } 

     const wrapper = mount(<ConnectedDatePicker/>, options) 

     store.dispatch(windowResize(DESKTOP)); 


     console.log('state-->', wrapper.state()) // {} 
     console.log('props-->', wrapper.props()) // Doesn't include all my component specific props 
     console.log(wrapper.find('DatePicker').props()) // Prints all props as expected 
     console.log(wrapper.find('DatePicker').state()) // Error 

    }); 

    test('connected attempt #3',() => { 

     const store = configureDataStore(); 

     const wrapper = mount(<Provider store={store}><ConnectedDatePicker/></Provider>) 

     store.dispatch(windowResize(DESKTOP)); 

     console.log('state-->', wrapper.state()) // null 
     console.log('props-->', wrapper.props()); // Doesn't include all my component specific props 
     console.log(wrapper.find('DatePicker').props()) // Prints all props as expected 
     console.log(wrapper.find('DatePicker').state()) // Error 
     console.log('--------------------------') 

    }); 
}); 

Answer 1

wrapper.find('DatePicker').instance().stateはあなたのために働く必要があります:)