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

Posted 2023-02-19

【中文标题】使用酶获取连接到 redux 的子组件的状态

【英文标题】：Get state for child components connected to redux with enzyme

【发布时间】：2017-11-19 17:07:55

【问题描述】：

我正在尝试测试一个 redux 连接的组件。组件在调整大小事件时更改其属性。

我想用酶安装我的 DatePicker 组件，发送一个 resize 事件，并测试我的 DatePicker 的 prop 值 IS_DESKTOP_VIEWPORT === true，因此，我的 DatePicker 的状态也发生了变化。

但是我无法访问我的 DatePicker 的状态，因为如果包装组件不是根，则酶不会让您访问状态：

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

我已尝试按照文档的建议将连接的 DatePicker 包装在 Provider 中，以及直接安装它但将 store 作为道具传递。这些方法似乎都不允许我将 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('--------------------------')

    );
);

【问题讨论】：

通常，建议通过手动模拟来自 Redux 的 props 来测试未修饰的组件，并单独测试你的 reducer。 github.com/airbnb/enzyme/issues/98

【参考方案1】：

wrapper.find('DatePicker').instance().state 应该适合你:)

【参考方案2】：

按以下步骤进行：

确保您的DatePicker：

export class DatePicker... // without export it would not work in your test file
export default connect(...)(DatePicker);

获取状态的几种方法：

如果你这样做：

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

你需要潜入两次 DatePicker 来获取状态：

expect(wrapper.dive().dive().state()).toEqual(...)

如果你这样做：

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

您无需潜水即可获得状态。

expect(wrapper.state()).toEqual(...)

AIRBNB 开发人员建议我这样做： 要获取包装器状态，不建议使用wrapper.instance().state， 你最好用wrapper.state()

【讨论】：

在一个浅层中包裹了connectedComponent

在 b 中，浅层正在包装它自己的组件

【参考方案3】：

以下内容对我有用：

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