Ферментная оболочка не изменяется при изменении состояния / реквизита

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

Попробуйте изменить состояние или реквизиты на одном экземпляре оболочки и подтвердить на том же экземпляре

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

, поэтому даже для утверждения оно должно быть на одном экземпляре оболочки.

Answer 2

Shallow работают только на one level, он не создаст компонент глубокого уровня, и, таким образом, вы не сможете увидеть изменения в любом случае во внутреннем компоненте.

Кроме того, вместо тестированиянекоторые значения BootstrapTable в MyTable файле теста, определение теста в BootstrapTable файле теста ... jest

Один хак, который вы можете сделать, это:

let bootstrapTableWrapper = wrapper.find(BootstrapTable).shallow(); и, следовательно, bootstrapTableWrapper - это мелкая часть вашего компонента.

Но я действительно рекомендую перенести все тесты, касающиеся BootstrapTable, в свой собственный файл теста.