Enzyme does not rerender MobX components with @observable using shallow rendering

[d4rky-pl]

When using enzyme with MobX and shallow rendering, it used to properly rerender components when changing @observable value. Unfortunately this is no longer the case with React v16.

I've prepared a test repository. You can see that tests run correctly on React 15 with enzyme-adapter-react-15 but exactly the same code fails with React 16 and enzyme-adapter-react-16 (same enzyme version).

Full mount works correctly.

[d4rky-pl]

I've tracked this bug down to a bug in react-test-renderer/shallow. I'm not sure if this issue should be closed or not as enzyme "inherits" this buggy behaviour and other people may stumble upon it and look here.

[bradyep]

I am experiencing this issue as well. Changes to observable values are not affecting the shallow rendering. Is there any workaround or way to fix this?

[ljharb]

I think mobx will need it’s own adapter; it’s not guaranteed it will work with any of the React adapters.

[bradyep]

I believe I've found a workaround, and since this issue is currently my top Google result for 'enzyme mobx react 16', I'll post it here. I got it from the comment from 'dsumer' here: #1184

Everytime I want anything dependent on an observable to be updated, I just call setState on the wrapper:

  viewStore.openModal();
  wrapper.setState({ forceUpdateCall: 1 });
  expect(wrapper.find(Modal).prop('isOpen')).toBeTruthy();

I don't know if you need to supply a different state each time in order for things to update, but I personally increment that forceUpdateCall value on every call out of paranoia.

This obviously undercuts the premise of MobX where things should 'just update', but it works for me without too much hassle. I'd love to not have to do this so if anyone knows of a fix or better workaround, please let me know. Thanks.

[ljharb]

Closing this; if anyone builds a MobX enzyme adapter, it'd be great to link it in the docs.