获取与酶连接到redux的子组件的状态

时间:2017-06-16 20:23:55

标签: reactjs redux enzyme jest

我正在尝试测试redux连接组件。该组件在resize事件上更改其属性。

我想用酶挂载我的DatePicker组件,调度resize事件,并测试我的DatePicker的prop值IS_DESKTOP_VIEWPORT === true,因此,我的DatePicker的状态也发生了变化。

但是我无法访问DatePicker的状态,因为如果包装器组件不是root用户,则酶不允许您访问状态:

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('--------------------------')

    });
});

3 个答案:

答案 0 :(得分:4)

wrapper.find('DatePicker').instance().state应该对你有用:)

答案 1 :(得分:1)

操作如下:

  1. 确保您的DatePicker

    export class DatePicker... // without export it would not work in your test file
    export default connect(...)(DatePicker);
    
  2. 获得状态的几种方法:

    1. 如果您这样做:

      const wrapper = shallow(<connectedDatePicker {...props} />)
      

      您需要两次潜入DatePicker才能获得状态:

      expect(wrapper.dive().dive().state()).toEqual({...})
      
    2. 如果您这样做:

      const wrapper = shallow(<DatePicker {...props} />);
      

      您不需要潜水即可获得状态。

      expect(wrapper.state()).toEqual({...})
      

AIRBNB开发人员在哪里建议我这样做:
要获取包装器状态,不建议使用wrapper.instance().state
您最好使用wrapper.state()

答案 2 :(得分:0)

以下对我有用:

let component = shallow(<ConnectedDatePicker store={store}/>).dive().dive();
it("The description", () => {
     expect(component.state('StateName')).toEqual('something');
});