作者:mobiledu2502932447 | 来源:互联网 | 2023-02-01 07:50
我正在尝试测试Redux连接的组件。组件在调整大小事件时更改其属性。
我想用酶安装我的DatePicker组件,调度一个调整大小的事件,并测试我的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中,以及直接安装它但将存储作为道具传递。这些方法似乎都不允许我将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()
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(, 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()
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('--------------------------')
});
});
小智..
5
wrapper.find('DatePicker').instance().state
应该为你工作:)
1> 小智..:
wrapper.find('DatePicker').instance().state
应该为你工作:)