JavaScript: Upgrading mobx-react from 3.5.9 to 4.0.4 (with Enzyme)

I just finished upgrading mobx-react from 3.5.9 to 4.0.4. By far, the biggest change is that "this.props and this.state in React components are now observables as well". Of course, you can read about this, and all the other changes, in the CHANGELOG.

One thing that really made this upgrade hard is that there was an issue with react-css-modules that caused me to have to move to babel-plugin-ract-css-modules per my earlier blog post.

Because props are now observable, if you make changes to them in your tests, you should wrap those changes in runInAction.

Sometimes, I see test files that call mount() in beforeEach. Then, in individual tests, they try to futz with things which means they end up needing to call wrapper.update before making their assertions. It's easier to do some setup in beforeEach, do any specialized setup in the individual test, and then make some helper function called mountWrapper that you use in each test. That way, you don't mount until you're really ready. This simplifies a lot of tests. Certainly, our recent upgrades to Enzyme 3 and mobx-react 4.0.4 made such problems worse.

Comments