- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在将其标记为重复之前,请仔细阅读
因此,我浏览了所有建议的问题,并进行了近 2 天的研究以找出问题背后的原因。
这是我所拥有的 -
1. 一个名为 SignIn 的组件,带有一些连接到 redux 存储的本地状态。
class SignIn extends React.Component {
constructor(props) {
super(props);
this.state = { isLoading: false };
}
render () {
isLoading
? <SomeLoadingComponent />
: <MainSigninComponent />
}
}
export default ConnectedSignIn = connect(mapStateToProps)(SignIn);
// This one is alright as it test on the default state and renders the actual SigninComponent.
test(`it renders correctly`, () => {
const wrapper = shallow(<ConnectedSignIn {...props} />, { context: { store }});
// .dive() because I intend to snapshot my actual SignIn component and not the connect wrapper.
expect(wrapper.dive()).toMatchSnapshot();
});
test(`it renders the loading view on setting isLoading state to true`, () => {
const wrapper = shallow(<ConnectedSignIn {...props} />, { context: { store }});
console.log(wrapper.dive().state()) // returns { isLoading: false }
// Again .dive because I want to call setState on my SignIn component
wrapper.dive().setState({ isLoading: true });
console.log(wrapper.dive().state()) // still returns { isLoading: false }
// Tried the callback method to ensure async op completion
wrapper.dive().setState({ isLoading: true }, () => {
console.log(wrapper.dive().state()) // still returns { isLoading: false }
});
});
最佳答案
每次使用dive()
它创建了一个新的包装器,因此您的所有调用都引用了一个新的包装器,而不是您更新的包装器。相反,你可以试试这个:
test(`it renders the loading view on setting isLoading state to true, () => {
const wrapper = shallow(<ConnectedSignIn {...props} />, { context: { store }});
const component = wrapper.dive()
component.setState({ isLoading: true });
console.log(component.state()) // should be {isLoading: true}
});
关于reactjs - enzyme shallowWrapper.setState 不适用于redux 连接组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49647009/
在我使用 withSnackbar 之前,这个测试已经通过了。但现在它失败了,我真的不知道如何解决。所以任何帮助将不胜感激。谢谢。 这是我在组件中的导出: export default withSna
我正在关注 goreact testess 视频并在此处尝试。我的尝试没有成功。我有以下错误: TypeError: ShallowWrapper::dive () 无法在主机组件上调用 错误:htt
我正在为组件编写一个测试来测试其功能之一,但出现错误:ShallowWrapper只能包装有效元素 组件文件如下 - Panel.jsx(简化): class Panel extends Compon
在将其标记为重复之前,请仔细阅读 因此,我浏览了所有建议的问题,并进行了近 2 天的研究以找出问题背后的原因。 这是我所拥有的 - 1. 一个名为 SignIn 的组件,带有一些连接到 redux 存
我不知道为什么在运行快照测试时得到空的shallowWrapper对象,我使用Jest和Enzyme: 我在App.test.js.snap文件中得到的内容: // Jest Snapshot v1,
我不知道为什么在运行快照测试时得到空的shallowWrapper对象,我使用Jest和Enzyme: 我在App.test.js.snap文件中得到的内容: // Jest Snapshot v1,
所以我正在为我的 Item 组件编写测试,我尝试渲染 ItemCard 组件,然后使用该包装器创建快照,但它返回一个空的 ShallowWrapper {}/ 更多信息请查看代码: 项目.test.j
我是一名优秀的程序员,十分优秀!