gpt4 book ai didi

reactjs - enzyme shallowWrapper.setState 不适用于redux 连接组件

转载 作者:行者123 更新时间:2023-12-04 16:05:41 27 4
gpt4 key购买 nike

在将其标记为重复之前,请仔细阅读

因此,我浏览了所有建议的问题,并进行了近 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);

现在你可以看到 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();
});

现在,当我打算将状态更改为 { isLoading: true } 时,我会在第二次测试中像这样调用 setState。
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 }
});
});

所以通过上面的代码和输出,我推断浅层包装器的 setState 没有正常工作,因为实际上没有更新组件的状态。

顺便提一下,

1. 我也尝试使用 wrapper.dive().instance().setState()
当我在一些问题中读到更新实例状态时,这种方式会更好。 不工作。

2. 我还尝试使用 wrapper.update() 和 wrapper.dive().update() 强制更新浅层组件。这个也没用。

我的依赖版本

“ react ”:“16.0.0”,

“ react 原生”:“0.50.0”,

"react-redux": "^5.0.6",

" enzyme ": "^3.3.0",

“ enzyme 适配器 react 16”:“^1.1.1”,

"jest": "21.2.1",

“ react 域”:“^16.2.0”

我已经阅读了通过将组件与 redux 分开来隔离测试组件的指南。我这样做了,我的测试用例运行良好,但我想知道这种行为是正常的还是错误的,如果有人成功地测试了状态更改以及 redux 连接组件的渲染更改,请告诉我您的方法。

最佳答案

每次使用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}
});

引用 Jordan Harband's answerthis Enzyme issue .

关于reactjs - enzyme shallowWrapper.setState 不适用于redux 连接组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49647009/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com