Reactjs 酶：对于浅层，redux存储更新不会触发componentDidUpdate

我在测试React组件的一个非常特定的用例时遇到了问题。在本例中，我有一个组件，它在mount上分派一个操作，然后在第一次分派的结果出现后分派另一个操作

我认为，问题在于Ezyme的

shallow

方法没有在我的组件中调用

componentDidUpdate

。我已经用最简单的代码重现了这个问题，并确认如果我使用

mount

而不是

shall

，问题就会消失。然而，他说，自版本3以来，

shallow

确实调用了React的生命周期方法，例如

componentdiddupdate

。当然，我不能在测试中使用

mount

，因为我不想挂载整个树（在我的情况下，这意味着加载整个应用程序）

因此我想知道：这是酶中的一个bug，还是我在使用这个库时遗漏了什么

下面是我的代码示例：

import*as React from'React'；
从'react redux'导入{connect}；
从“redux”导入{createStore}；
从“酶”导入{shall}；
从“sinon”进口sinon；
常量动作={
//这将获取网络上的资源。
getList:（）=>{}，
receiveList:list=>{
返回{
键入：“接收列表”，
列表
};
},
//这将获取网络上的资源列表。
getObjects:（）=>{}，
};
const reducer=（state={list:[]}，action）=>{
开关（动作类型）{
案例“接收列表”：
返回{…状态，列表：action.list}；
违约：
返回状态；
}
};
类MyAppBase扩展了React.Component{
componentDidMount（）{
this.props.dispatch（actions.getList（））；
}
组件更新（下一步）{
if（nextrops.list！==this.props.list）{
this.props.dispatch（actions.getObjects（nextrops.list））；
}
}
render（）{
返回null；
}
}
const MyApp=connect（state=>{return{list:state.list}；}）（MyAppBase）；
描述（“”，（）=>{
它（'接收列表后获取对象'，（）=>{
//调用网络的模拟操作。
sinon.stub（操作“getList”）；
返回（{type:'whatever'}）；
sinon.stub（操作，'getObjects'）；
返回（{type:'whatever'}）；
//创建一个redux存储。
const store=createStore（reducer）；
//创建组件。
常量包装器=浅（）；
//验证是否调用了'componentDidMount'，而不是'componentDidUpdate'。
expect（actions.getList.callCount）.toEqual（1）；
expect（actions.getObjects.callCount）.toEqual（0）；
//分派将更改redux存储的操作。
store.dispatch（actions.receiveList（['aa'，'bb']）；
//希望调用'componentDidUpdate'方法。
expect（actions.getObjects.callCount）.toEqual（1）；
//这不起作用，因为某些原因，从未调用“componentdiddupdate”。
});
});

我为此使用的软件包版本：

"react": "16.6.0",
"react-dom": "16.6.0",
"react-redux": "5.1.0",
"redux": "4.0.1",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"sinon": "7.1.0"

谢谢

酶的“浅层”方法似乎并不完全支持“成分更新”方法。

shallow

装入的组件似乎只在调用

wrapper.setProps（）

之后调用

componentdiddupdate

。使用新状态更新存储并不重要，包装器只是没有更新

这可以通过更改测试以执行以下操作来确认：

// Dispatch an action that will change the redux store.
store.dispatch(actions.receiveList([ 'aa', 'bb' ]));

// Will print '[]'
console.log(wrapper.instance().props.list);

// Create a new wrapper with the current store:
const wrapper2 = shallow(<MyApp store={store} />);

// Will print '['aa', 'bb']'
console.log(wrapper2.instance().props.list)

---

另外，

componentdiddupdate

可以通过

simulate

方法触发，点击或更改按钮或输入。

我也遇到了同样的问题。更重要的是，在我看来，问题比不调用

componentdiddupdate

更大。在分派操作之后，我尝试使用

setProps（）

手动触发此方法，尽管调用了

cDU

，但存储中的更改仍然没有反映在组件的props中（当

setProps（）

的更改被忽略时）。

// Dispatch an action that will change the redux store.
store.dispatch(actions.receiveList([ 'aa', 'bb' ]));

// Manually cause componentDidUpdate to trigger
wrapper.setProps({
  list: ['aa', 'bb']
});