• ..

Sass

    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);