Calling setProps() doesn't change props of children anymore

[mattp94]

I just switched to Enzyme v3 with React v15.6 and I could notice that setProps() doesn't change props of children anymore. Instead, it only changes props of wrapper:

Config

{
    "enzyme":"^3.1.0",
    "enzyme-adapter-react-15":"^1.0.1",
    "jest":"^21.2.1",
    "react":"^15.6.2",
    "react-dom":"^15.6.2",
    "react-test-renderer":"^15.6.2"
}

Test

import React from 'react'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-15'

Enzyme.configure({ adapter: new Adapter() })

const Child = () => null
const Parent = props => <Child test={props.test} />

it('should update prop test', () => {
    const parent = Enzyme.mount(<Parent test="foo" />)
    const child = parent.find(Child)

    expect(parent.prop('test')).toBe('foo') // true (foo)
    expect(child.prop('test')).toBe('foo') // true (foo)

    parent.setProps({ test: 'bar' })

    expect(parent.prop('test')).toBe('bar') // true (bar)
    expect(child.prop('test')).toBe('bar') // false (foo)
})

The above test works with Enzyme v2.

[marchaos]

Same issue for me. Seems similar to #1229

[Fetz]

setProps looks like is not calling componentWillReceiveProps, so probably that is why the props of the children are not updating

[Kepro]

same here, btw HACK!
if you find again that child then props will be new...
OLD code stop working

    const input = wrapper.find('input[type="text"]');

    expect(input.props().value).toBe('before');
    wrapper.setProps({ value: { test: 'after' } });
    expect(input.props().value).toBe('after');

new code start working...

    const input = wrapper.find('input[type="text"]');

    expect(input.props().value).toBe('before');
    wrapper.setProps({ value: { test: 'after' } });
    const inputAfter = wrapper.find('input[type="text"]');
    expect(inputAfter.props().value).toBe('after');

[ljharb]

It is an intended change in v3 to require you to re-find elements if you want changes reflected.

[Kepro]

@ljharb, but why if we have .props() method? that method should return actual props, this will cause duplications in a code... btw there is no information in migrating notes about this...

[ljharb]

@Kepro when you use .find in v2, you get a wrapper that updates automatically when the root wrapper updates. In v3, it's immutable, so you have to re-find from the root to see changes reflected.

[Fetz]

@ljharb, then why setProps is not calling of componentWillReceiveProps of root wrapper? Or should is a different issue?

[ljharb]

@Fetz that might be a different issue; please file one and include your enzyme and react (and if applicable, enzyme adapter) versions

[rsimsek]

Hi,
I have been trying to update children props with calling setProps on the wrapper but that does not do the trick. Is there a way to update it? I have tried by finding the element but that does not work either. Is there an example for that?

[juliosampaio]

Same situation here :/

[Kepro]

can you read comments before you add your comment?

[ANG95]

it("should >>>>>>>>>>>>>>>>>>>", async () => {
    loadWrapper();
    wrapper.update();
    wrapper.setProps({ route: undefined });
    wrapper.update();
    let infoModal = wrapper.find(InfoModal);
    // wrapper.update();
    infoModal = wrapper.find(InfoModal);
    expect(infoModal.props().visible).toBeFalsy();
  });

[victorAttar]

Working using the solution i find in this comment

But need to use setTimeout every time when made changes is bad.
It is because of the provider? I'm using redux .

beforeEach((done) => {
     wrapper = mount(
        <Provider store={store}>
          <MyDialog />
        </Provider>,
      );
          wrapper.find('form');.simulate('submit', { preventDefault: () => {} });
          setTimeout(() => {
            wrapper.update();
            mydialog = wrapper.find(MyDialog);
            done();
          }, 0);
});

[Kepro]

@victorAttar you're commenting on a closed issue from 2017! for help use StackOverflow...

[victorAttar]

@victorAttar you're commenting on a closed issue from 2017! for help use StackOverflow...

Ended up finding the solution for my problem.

I'm using redux and enzyme, wrapped my componentes to a
Was rendering my componentes only wrapping , causing problem when updating props, because was updating props, not my component props

But i found that enzyme has a wrapper prop, then changed my function from

export function mount(Ui, props) {
  const { Wrapper } = RenderWithRedux(props);
  return MountRender(<Wrapper>{UI}<Wrapper/>);
}

to

export function mount(Ui, props) {
  const { Wrapper } = RenderWithRedux(props);
  return MountRender(Ui, { wrappingComponent: Wrapper });
}

Now wrapper.update() is working!