Question

编辑（MyTable.js组件）：

render () {

  // I manipulate this.props here and assign some of them to bootstrapTableProps

  return (
    <div>
        <Header />
        <BootstrapTable {bootstrapTableProps}/>
    </div>
  )
}

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

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或wrapper.setState(...)更改外部wrapper.setProps({...});上的状态（和/或道具）。然后我断言正确的属性被传递给内部组件。

接下来，我再次制作wrapper.setState(...)或wrapper.setProps({...});。然后我断言更新的属性被传递给之前创建的bootstrapTableWrapper。 但没有任何反应。

在检查新属性是否已传递到bootstrapTableWrapper之前，我必须重新创建bootstrapTableWrapper = wrapper.find('BootstrapTable');并且仅，然后我会看到更改。

原因是wrapper.find是否对所找到的组件进行了深层复制，以便原始组件的更改不会影响它？

Answer 1

Shallow仅对one level进行操作，它不会创建深层组件，因此您无法在内部组件中看到任何更改。

此外，不是在BootstrapTable测试文件中测试MyTable的某些值，而是在BootstrapTable测试文件中定义测试... jest

比你能做的更糟糕的是：

let bootstrapTableWrapper = wrapper.find(BootstrapTable).shallow(); 因此bootstrapTableWrapper是你的组成部分的浅层。

但我真的建议将有关BootstrapTable的所有测试移到自己的测试文件中。

Answer 2

尝试更改同一个包装器实例上的状态或道具并在同一实例上断言

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

所以即使是断言它也需要在同一个包装器实例上。

当状态/道具改变时，酶包装器不会改变

2 个答案: