Posts

Showing posts from May, 2018

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

I just upgraded mobx-react from 4.0.4 to 4.4.3. In theory, this should not have required any code changes. However, starting in mobx-react 4.1.2, there was something that tickled what I'm guessing is a hidden bug in Enzyme 3.3.0. We had a test that would purposely throw an exception in the render method of a React component. The test was written using shallow. Even once I had gotten the test to pass in mobx-react 4.1.2, it was somehow poisoning something unknown which caused about 0.5% of my other tests to fail. It was perfectly reproducible if I ran all the tests, but running any of them individually would not fail. It was quite baffling. My buddy Kevin figured out that moving from shallow to mount fixed the issue, inexplicably. It's a workaround, but we'll have to just live with it since I have no idea how to find the bug in Enzyme. Note, we're using React 15.6.2 and MobX 2.7.0.

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'…