Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lifecycle methods aren't called as expected when state changes #1247

Closed
sawyerh opened this issue Oct 10, 2017 · 2 comments · Fixed by #1261
Closed

Lifecycle methods aren't called as expected when state changes #1247

sawyerh opened this issue Oct 10, 2017 · 2 comments · Fixed by #1261

Comments

@sawyerh
Copy link

sawyerh commented Oct 10, 2017

I've upgraded from Enzyme 2.x to 3.x and noticed that tests that were previously passing now fail. I've limited these down to tests that depend on lifecycle methods like componentDidUpdate to be called.

In #1140 lifecycleExperimental was enabled by default, which to my understanding means lifecycle methods like componentDidUpdate should be called when setState is called on a shallow-rendered component. However, I am not seeing this behavior.

Even more weird: the migration guide makes it sound as if 2.x wouldn't have been calling these lifecycle methods, but I assume they were since my tests were passing before upgrading 🤔

I've created a simplified example of what I'm trying to describe here: https://github.com/sawyerh/enzyme-bug

The lifecycle method componentDidUpdate doesn't appear to be called when the component is rendered like this:

const wrapper = shallow(<Foo />);
...
wrapper.setState({...})

However componentDidUpdate does appear to be called when the component is rendered either of these ways:

  1. const wrapper = shallow(<Foo />, { lifecycleExperimental: true });
  2. const wrapper = mount(<Foo />);

Maybe related: #1201

sawyerh added a commit to CMSgov/design-system that referenced this issue Oct 12, 2017
This is supposedly the default, but doesn't seem to be the case. See for more info: enzymejs/enzyme#1247
sawyerh added a commit to CMSgov/design-system that referenced this issue Oct 13, 2017
* Add support for React 16

* Update React, Enzyme, and Jest

* Update docs to React 16

* Update react-hot-loader

* Fix invalid HTML tag

* Update yarn.lock

* Set lifecycleExperimental to true

This is supposedly the default, but doesn't seem to be the case. See for more info: enzymejs/enzyme#1247

* Use mount in order to get componentDidUpdate to fire

* Disable lifecycle methods to avoid mount/unmount events

* Update react-docgen

* Update react-hot-loader and react-element-to-jsx-string
@koba04
Copy link
Contributor

koba04 commented Oct 14, 2017

@sawyerh Thanks! I've created a PR to fix this. #1261

@sawyerh
Copy link
Author

sawyerh commented Oct 14, 2017

Thanks @koba04! 🙏

ljharb pushed a commit to koba04/enzyme that referenced this issue Nov 3, 2017
jquense pushed a commit to jquense/enzyme that referenced this issue Feb 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants