componentDidUpdate is not called for shallow rendered component

[delijah]

npm package versions

enzyme: 3.2.0
enzyme-adapter-react-16: 1.1.1
react: 16.2.0
react-dom: 16.2.0

Problem

When changing the state inside a component, componentDidUpdate is not called.

Expected behaviour

When changing the state inside a component, componentDidUpdate should get called.

Code example

import { shallow } from 'enzyme';
import React from 'react';

class Dropdown extends React.Component {
    constructor(props) {
        super(props);

        console.log('constructor');

        this.state = {
            highlightedIndex: 0,
        };

        this.handleMouseOver = this.handleMouseOver.bind(this);
    }

    componentDidUpdate() {
        console.log('componentDidUpdate');
    }

    handleMouseOver() {
        console.log('handleMouseOver', 0);

        this.setState({
            highlightedIndex: 1,
        }, () => {
            console.log('handleMouseOver', 1);
        });

        console.log('handleMouseOver', 2);
    }

    render() {
        console.log('render');

        return <div onMouseOver={this.handleMouseOver}>Please hover me</div>;
    }
}

it('should work', () => {
    const wrapper = shallow(<Dropdown />);

    wrapper.simulate('mouseover');
    wrapper.update();
});

Console output

  console.log .../__tests__/Dropdown.js:8
    constructor

  console.log .../__tests__/Dropdown.js:34
    render

  console.log .../__tests__/Dropdown.js:22
    handleMouseOver 0

  console.log .../__tests__/Dropdown.js:34
    render

  console.log .../__tests__/Dropdown.js:27
    handleMouseOver 1

  console.log .../__tests__/Dropdown.js:30
    handleMouseOver 2

[koba04]

Currently, enzyme supports all lifecycle methods only when the update occurs through ShallowWrapper.
In this case, handleMouseOver is calling setState of the ReactComponent instance so we can't do anything without overriding setState of ReactComponent instance.

• Support all Component Lifecycle methods in ShallowRenderer #318 (comment)

I used to create a patch to support this case but we should investigate that the patch doesn't break anything.
(Also I should support forceUpdate (and replaceState) as well.

• koba04@88fdddc

@ljharb What do you think?

[ljharb]

In general, simulate doesn't actually simulate anything, so I think it should never be used.

If instead, this did wrapper.prop('onMouseOver')(), and then on the next tick, did wrapper.update(), what would happen?

[koba04]

If instead, this did wrapper.prop('onMouseOver')(), and then on the next tick, did wrapper.update(), what would happen?

The result is same. componentDidUpdate is never called.
In this case, I guess we have to override instance.setState to support componentDidUpdate because we can't know whether to call setState or not.

[craigkovatch]

Edit: recanting, looks like I misunderstood.

[koba04]

@craigkovatch The issue you've mentioned is about not to call componentDidUpdate when setState is called with mount? If so, it's a strange behavior because mount is just calling setState React provides.
wrapper.update() is just to update the rendered element that the wrapper is storing, not to rerender the element.

[ljharb]

@koba04 i'm not sure why we'd need to override setState; wouldn't that cause the component to rerender normally, and enzyme could be aware of that?

[koba04]

@ljharb
Yes, that causes to rerender normally as ReactShallowRenderer, which means componentDidUpdate is never called because ReactShallowRenderer doesn't support the lifecycle method.
When setState is called from ReactComponent instance directly, it is processed in the React ShallowRenderer so enzyme can't handle the update to call the lifecycle method.

Current lifecycle methods support is hooking update methods ShallowWrapper provides, which are shallowWrapper.setState or shallowWrapper.setProps or shallow() etc...
So enzyme should be aware of that to do that.

[craigkovatch]

@koba04 you are right, the issue I saw was inside of render() after a wrapper.update(). I will investigate the details and file a separate issue if necessary.

[delijah]

Hey. Do you have any updates on this?

[smoholkar]

@koba04 @ljharb In some cases when I set the value method on component instance, I have to first call component.instance().forceUpdate() & then component.update(). Why do I need to forceUpdate the instance explicitly ?

[koba04]

@smoholkar
I'm not sure why calling instance().forceUpdate() is required in your case.
Could you share the example?

[smoholkar]

@koba04 Here's one example

const wrapper = shallow(<TestComponent {...tableProps} {...props} />);
wrapper.instance().scrollAutoVisible = true;
wrapper.instance().forceUpdate();
wrapper.update();
const baseThings = wrapper.find('.base-things');
 expect(baseThings).toHaveLength(2);