Enzyme で .simulate() した時に子要素の props が更新されない問題

バージョンなど

{
  "devDependencies": {
    "enzyme": "^3.7.0",
    "jest": "^23.6.0"
  }
}

以下は2番目のItemをクリックすると、次の状態ではaria-selected={true}となる事を確認しようとしていたテストです。しかし、これは通りません。

const secondItem = mount(Component)
  .find(Item)
  .at(1);
secondItem.simulate('click');
expect(secondItem.prop('aria-selected')).toBeTruthy();

解決

チェックする時に再度wrapperから対象の要素を取得したものを使えば更新された状態のItemが取れます。こうすれば、通ります。

const secondItem = mount(Component)
  .find(Item)
  .at(1);
secondItem.simulate('click');
expect(
  wrapper
    .find(Item)
    .at(1)
    .prop('aria-selected')
).toBeTruthy();

おまけ

一応setTimeoutを使っても通るよおです。

const secondItem = mount(Component)
  .find(Item)
  .at(1);
secondItem.simulate('click');
setTimeout(() => {
  expect(
    wrapper
      .find(Item)
      .at(1)
      .prop('aria-selected')
  ).toBeTruthy();
}, 0);