获取用酶连接到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应该为你工作:)