我正在尝试进行DOM测试,以检查单击按钮时是否打开了对话框。然后我得到了这个错误
始终不变的违规行为:在>“连接(照片)”的上下文或道具中找不到“存储”。将根组件包装在中,或者>将“存储”作为道具明确传递给“ Connect(Photos)”。
我用过玩笑,我的组件使用
连接到了redux存储。导出默认的connect(mapToProps)(照片);
AccessoriesPhotos.js
class Photos extends React.Component {
constructor() {
super();
this.state = {
open: false,
}
this.handleOpen = this.handleOpen.bind(this);
}
handleOpen = () => {
this.setState({ open: true });
};
render (){
return (....)
}
const mapToProps = (state) => {
return {
Search: state.Search,
App: state.App
}
}
export default connect(mapToProps)(Photos);
}
AccessoriesPhotos.test.js
import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Photos } from '../../../Photos/Bike/AccessoriesPhotos';
Enzyme.configure({adapter: new Adapter()});
it('Dialog box opens after click', () => {
const openDialogButton = shallow(<Photos open="true" close="false" />);
expect(openDialogButton.text()).toEqual('true');
openDialogButton.find('input').simulate('change');
expect(openDialogButton.text()).toEqual('false');
});
这就是我得到的结果。
始终不变的违规行为:在>“连接(照片)”的上下文或道具中找不到“存储”。将根组件包装在中,或>将“存储”作为道具明确传递给“连接(照片)”。强文本
答案 0 :(得分:1)
您的Photos
组件未获得store
,因为您没有在测试中将其作为Provider
的子对象呈现。如果您也将其包装在Provider
中以进行测试,则它将按预期工作。
const openDialogButton = shallow(
<Provider store={store}>
<Photos open="true" close="false" />
</Provider>
);