獲取用酶連接到redux的子組件的狀態

Question

我正在嘗試測試連接的還原組件。該組件會在resize事件中更改其屬性。

我想安裝我的DatePicker組件與酶，調度resize事件，並測試我的DatePicker的支價值IS_DESKTOP_VIEWPORT === true，並因此，我的DatePicker的狀態也已更改。

不過，我無法訪問我的DatePicker的狀態，因爲酶不會讓你訪問狀態，如果在包裝部件不是根：

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

我試過在一個運營商的纏繞連接的DatePicker文檔建議，以及直接安裝它，但通過商店作爲道具。這兩種方法似乎都不允許我將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應該爲你工作:)