From 2d5f20f8f2e610e4384e72c41a519d6552692b38 Mon Sep 17 00:00:00 2001 From: Peter Mouland Date: Tue, 24 Oct 2017 21:52:21 +0100 Subject: [PATCH] [Docs] Update migration-from-2-to-3.md This PR has come about from this issue: #1299 --- docs/guides/migration-from-2-to-3.md | 43 ++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/docs/guides/migration-from-2-to-3.md b/docs/guides/migration-from-2-to-3.md index 25df052ec..be1d09c89 100644 --- a/docs/guides/migration-from-2-to-3.md +++ b/docs/guides/migration-from-2-to-3.md @@ -102,6 +102,49 @@ Although this is a breaking change, I believe the new behavior is closer to what actually expect and want. Having enzyme wrappers be immutable results in more deterministic tests that are less prone to flakiness from external factors. +### Calling `props()` after a state change + +In `enzyme` v2, executing an event that would change a component state (and in turn update props) would return those updated props via the `.props` method. + +Now, in `enzyme` v3, you are required to re-find the component; for example: + +```jsx +class Toggler extends React.Component { + constructor(...args) { + super(...args); + this.state = { on: false }; + } + + toggle() { + this.setState(({ on }) => ({ on: !on })); + } + + render() { + const { on } = this.state; + return (
{on ? 'on' : 'off'}
); + } +} + +it('passes in enzyme v2, fails in v3', () => { + const wrapper = mount(); + const root = wrapper.find('#root'); + expect(root.text()).to.equal('off'); + + wrapper.instance().toggle(); + + expect(root.text()).to.equal('on'); +}); + +it('passes in v2 and v3', () => { + const wrapper = mount(); + expect(wrapper.find('#root').text()).to.equal('off'); + + wrapper.instance().toggle(); + + expect(wrapper.find('#root').text()).to.equal('on'); +}); +``` + ## `children()` now has slightly different meaning enzyme has a `.children()` method which is intended to return the rendered children of a wrapper.