setState does not set state

Describe the bug A clear and concise description of what the bug is.

I’ve setup versions enzyme 3.5.0 and enzyme-adapter-react-16 1.3.0. I’ve created an enzyme test in this commit https://github.com/polkadot-js/apps/pull/265/commits/0d048c094b91762ac6a7812f5d4c5899b71b5af5 that mounts the component that passes. If I run a test with expect(wrapper.get(0)).toBe(1); it will show me that the component includes the correct props along with provided fixtures <Signer queue={[{"id": "test", "rpc": {"isSigned": true}, "status": "test"}]} t={[Function mockT]} />. So far the test I’ve written that checks expect(wrapper).toHaveLength(1); is passing successfully. However, I want to run a test to check that the <Modal className='ui--signer-Signer' ... (see https://github.com/polkadot-js/apps/blob/master/packages/ui-signer/src/Modal.tsx#L89) renders correctly, but it only renders when this.state.currentItem and this.state.currentItem.rpc.isSigned (see https://github.com/polkadot-js/apps/blob/master/packages/ui-signer/src/Modal.tsx#L83) are defined and true. So in the commit I created fixtures for the the currentItem state value, and wrote the following test to set the state with setState, update the component, and then check that the state has changed. But it doesn’t appear to work, because the test results report that currentItem is still undefined instead of being the value I set to the fixtureCurrentItemState variable.

  it('sets the state of the component', () => {
    wrapper.setState({ currentItem: fixtureCurrentItemState });
    wrapper = wrapper.update(); // immutable usage
    expect(wrapper.state('currentItem')).toEqual(fixtureCurrentItemState);
    console.log(wrapper.debug());
  });

Note that I tried debugging with console.log(wrapper.debug()); and console.log(wrapper.html());, which I’ve used in the past without any issues, but neither of them output anything, so as an alternative I was able to check the state by running expect(wrapper.state()).toEqual(1);, which returned {"currentItem": undefined, "password": "", "unlockError": null}

To Reproduce Steps to reproduce the behavior:

1. Go to https://github.com/polkadot-js/apps
2. Clone Pull Request https://github.com/polkadot-js/apps/pull/265
3. Install dependencies and run the tests with yarn; yarn run build; yarn run test;
4. Remove .skip from the above mentioned tests
5. See the failing test

Expected behavior I expected setState to set the state

Screenshots Code used screenshot:

Failing test screenshot:

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version 68.0.3440.106

[comfroels]

Yeah I seem to be running into this same issue. I have an instance method that sets state, so I run the instance method and ensure the the correct state gets set:

wrapper.instance().reviewApp({ uid: 'some_id' });
expect(History.push).toHaveBeenCalledWith('/mobile/apps/detail/some_id');
expect(wrapper.state('adcOpen')).toBeTruthy(); //is false

Enzyme 3.5.0 enzyme-adapter-react-16 1.3.1

I changed it to manually call setState on the wrapper, but the state still isn’t set.

wrapper.setState({adcOpen: true});
expect(History.push).toHaveBeenCalledWith('/mobile/apps/detail/some_id');
expect(wrapper.state('adcOpen')).toBeTruthy(); //Still false

This still doesn’t set the state correctly. I even tried it with the callback on setState and still no-go.

wrapper.setState({adcOpen: true}, () => {
  expect(History.push).toHaveBeenCalledWith('/mobile/apps/detail/some_id');
  expect(wrapper.state('adcOpen')).toBeTruthy(); //Still false
});

EDIT: Also, I’m on React 16.4.2

[ljharb]

fwiw, wrapper = wrapper.update(); isn’t required; “immutable” just means you have to re-find from the root.

setState is async; what happens if you do:

wrapper.setState({ currentItem: fixtureCurrentItemState }, () => {
  wrapper.update();
  expect(wrapper.state('currentItem')).toEqual(fixtureCurrentItemState);
  console.log(wrapper.debug());
});