Removing or documenting the need for Shallow Renderer's .update()

[jwbay]

The problem

When testing interactions with shallow rendered components, what interactions do and don't need .update() after them can feel inconsistent. If the component's rendered output doesn't match what you think it should after performing some action, you can end up littering tests with .update() hoping to get lucky.

It wasn't until I peeked at the source and saw the .update() call in .simulate() that everything made sense. Even knowing that unless I'm using a few "blessed" methods I'll need to call .update() myself it's still going to trip me up at times.

The solution

Is it feasible to wrap rendering such that whenever a component is rendered .update() is called afterward automagically? Via wrapping .prototype.render, I suppose, though hopefully there's a more clever solution or hook somewhere.

Or at least, an update to .update()'s docs to be clear about the cases where it's called for you could help greatly. From what I saw, this is just .simulate and .setProps/State/Context?

[nfcampos]

One thing we could try to do that would help with some of these situations is make sure every time the component internally calls this.setState we call forceUpdate afterwards. But I'd say this is only worth it if we can find similar fixes for the other situations in which a shallow-rendered component might get out of date, is this the only one?

[jwbay]

wrapping/injecting around this.setState would probably also cover the 99% case. There are two cases I keep hitting, and automagically calling update after this.render or this.setState should handle both.

Example test for each: master...jwbay:update

The impure render case currently in the example for .update's documentation wouldn't benefit, but hopefully that's a serious edge case 😅

[nfcampos]

I need to think about this some more, I wonder if there's some reason why the shallow renderer from react TestUtils doesn't do this "update after all calls to setState"

(as for impure render methods there's nothing we can do, those will always have to be manual)

[guncha]

TestUtils does update the rendered output. The problem is that Enzyme doesn't know anything about it and happily keeps using the old output.

It needs to call renderer.getRenderOutput() which is why I recommend making this.node on ShallowWrapper on the root wrapper an accessor that calls the getRenderOutput function. It's a cheap function (1 function call, 1 if statement, ~5x property access) so performance wouldn't be an issue.

This way, the rendered output will always be up to date regardless of what goes on behind the scenes.

[hptk]

I had a related issue in #517 and would like to get behind OP on this.

As a relatively new user to both React and Enzyme, it feels very natural to me that calling setState() on the wrapper would trigger an update, making the test environment as much as possible reassemble the browser DOM where updating state triggers a re-render automatically.