Reactjs 酶包装不'；当状态/道具改变时不会改变

编辑（MyTable.js组件具有）：

render（）{
//我在这里操纵this.props，并将其中一些分配给bootstrapTableProps
返回(
)
}

（在MyTable.spec.js测试用例中，我有）：

let wrapper=shall(
);
//改变状态
setState（{sortName:'timestamp'，sortOrder:'asc'}）；
让bootstrapTableWrapper=wrapper.find（'BootstrapTable'）；
让timestamps=bootstrapTableWrapper.prop（'data'）.map（row=>row.timestamp）；
expect（timestamps）.to.be.ascending；//正确，排序为升序
//第二次改变状态
setState（{sortName:'timestamp'，sortOrder:'desc'}）；
让timestamps=bootstrapTableWrapper.prop（'data'）.map（row=>row.timestamp）；
expect（timestamps）.to.be.descending；//错误，仍在上升
//重新创建内部包装
bootstrapTableWrapper=wrapper.find（'BootstrapTable'）；
让timestamps=bootstrapTableWrapper.prop（'data'）.map（row=>row.timestamp）；
expect（timestamps）.to.be.descending；//正确，下降

---

因此，在测试中，我使用

wrapper.setState（…）

或

wrapper.setProps（{…}）更改外部
wrapper
包装上的状态（和/或属性）。然后我断言正确的属性被传递给内部组件

接下来，我再次生成
wrapper.setState（…）
或
wrapper.setProps（{…}）。然后我断言更新后的属性已传递给创建之前的
bootstrapTableWrapper
但什么也没发生。

在检查新属性是否传递给
bootstrapTableWrapper
之前，我必须重新创建它
bootstrapTableWrapper=wrapper.find（'BootstrapTable'）并且只有之后我才能看到更改

原因是
wrapper.find
对找到的组件进行深层复制，这样原始组件上的更改就不会影响它了吗？
Shallow只在
一个级别上操作，它不会创建深层组件，因此在任何情况下都无法在内部组件中看到更改

此外，与其在
MyTable
test的文件中测试
BootstrapTable
的一些值，不如在
BootstrapTable
test的文件中定义测试<代码>笑话

你能做的一件事是：

let bootstrapTableWrapper=wrapper.find（BootstrapTable.shallow（）
因此，
bootstrapTableWrapper
是组件的一部分

但我确实建议将所有与
BootstrapTable
相关的测试移到它自己的测试文件中。
尝试在包装器的同一实例上更改状态或道具，并在同一实例上断言

wrapper.instance().setState({
        sortOrder:'desc' 
       })

因此，即使对于断言，它也需要位于包装器的同一个实例上。
谢谢。我有MyTable.js，在一个div和该div中有两个组件BootstrapTable和TableTitle，例如在另一个文件中定义的。我对我的桌子做了一个浅显的观察，我检查了传递给BootstrapTable的道具。这应该可以用MyTable的浅包装进行检查？我已经更新了这个问题，以便更清楚地说明我在做什么。我认为使用shallow，我应该能够断言传递给BootstrapTable的属性（因为这是MyTable组件测试的一部分），但不能断言BootstrapTable的内部内容？请尝试查看其他注释。直接在实例上操作我尝试了该解决方案，甚至没有通过第一个预期。我尝试了该解决方案，甚至没有通过第一个预期。我不明白为什么我要在实例上操作，而不是在包装器上操作。
let wrapper = shallow(
  <MyTable
    {...someProps}
  />
);

// change state
wrapper.setState({sortName: 'timestamp', sortOrder: 'asc'});

let bootstrapTableWrapper = wrapper.find('BootstrapTable');
let timestamps = bootstrapTableWrapper.prop('data').map(row => row.timestamp);
expect(timestamps).to.be.ascending; // CORRECT, sorted to be ascending

// change state second time
wrapper.setState({sortName: 'timestamp', sortOrder: 'desc'});

let timestamps = bootstrapTableWrapper.prop('data').map(row => row.timestamp);
expect(timestamps).to.be.descending; // ERROR, still ascending

// recreate the inner wrapper
bootstrapTableWrapper = wrapper.find('BootstrapTable');
let timestamps = bootstrapTableWrapper.prop('data').map(row => row.timestamp);
expect(timestamps).to.be.descending; // CORRECT, descending

wrapper.instance().setState({
        sortOrder:'desc' 
       })