-
Notifications
You must be signed in to change notification settings - Fork 47k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New feature flags to help detect unexpected lifecycle side effects (#…
…11587) Added `debugRenderPhaseSideEffects` feature flag to help detect unexpected side effects in pre-commit lifecycle hooks and `setState` reducers.
- Loading branch information
Showing
8 changed files
with
167 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 123 additions & 0 deletions
123
packages/react/src/__tests__/ReactAsyncClassComponent-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
/** | ||
* Copyright (c) 2013-present, Facebook, Inc. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @emails react-core | ||
*/ | ||
|
||
'use strict'; | ||
|
||
var React; | ||
var ReactFeatureFlags; | ||
var ReactTestRenderer; | ||
|
||
describe('ReactAsyncClassComponent', () => { | ||
describe('debugRenderPhaseSideEffects', () => { | ||
beforeEach(() => { | ||
jest.resetModules(); | ||
ReactFeatureFlags = require('shared/ReactFeatureFlags'); | ||
ReactFeatureFlags.debugRenderPhaseSideEffects = true; | ||
React = require('react'); | ||
ReactTestRenderer = require('react-test-renderer'); | ||
}); | ||
|
||
it('should invoke precommit lifecycle methods twice', () => { | ||
let log = []; | ||
let shouldComponentUpdate = false; | ||
class ClassComponent extends React.Component { | ||
state = {}; | ||
componentDidMount() { | ||
log.push('componentDidMount'); | ||
} | ||
componentDidUpdate() { | ||
log.push('componentDidUpdate'); | ||
} | ||
componentWillMount() { | ||
log.push('componentWillMount'); | ||
} | ||
componentWillReceiveProps() { | ||
log.push('componentWillReceiveProps'); | ||
} | ||
componentWillUnmount() { | ||
log.push('componentWillUnmount'); | ||
} | ||
componentWillUpdate() { | ||
log.push('componentWillUpdate'); | ||
} | ||
shouldComponentUpdate() { | ||
log.push('shouldComponentUpdate'); | ||
return shouldComponentUpdate; | ||
} | ||
render() { | ||
log.push('render'); | ||
return null; | ||
} | ||
} | ||
|
||
const component = ReactTestRenderer.create(<ClassComponent />); | ||
expect(log).toEqual([ | ||
'componentWillMount', | ||
'componentWillMount', | ||
'render', | ||
'render', | ||
'componentDidMount', | ||
]); | ||
|
||
log = []; | ||
shouldComponentUpdate = true; | ||
|
||
component.update(<ClassComponent />); | ||
expect(log).toEqual([ | ||
'componentWillReceiveProps', | ||
'componentWillReceiveProps', | ||
'shouldComponentUpdate', | ||
'shouldComponentUpdate', | ||
'componentWillUpdate', | ||
'componentWillUpdate', | ||
'render', | ||
'render', | ||
'componentDidUpdate', | ||
]); | ||
|
||
log = []; | ||
shouldComponentUpdate = false; | ||
|
||
component.update(<ClassComponent />); | ||
expect(log).toEqual([ | ||
'componentWillReceiveProps', | ||
'componentWillReceiveProps', | ||
'shouldComponentUpdate', | ||
'shouldComponentUpdate', | ||
]); | ||
}); | ||
|
||
it('should invoke setState callbacks twice', () => { | ||
class ClassComponent extends React.Component { | ||
state = { | ||
count: 1, | ||
}; | ||
render() { | ||
return null; | ||
} | ||
} | ||
|
||
let setStateCount = 0; | ||
|
||
const rendered = ReactTestRenderer.create(<ClassComponent />); | ||
const instance = rendered.getInstance(); | ||
instance.setState(state => { | ||
setStateCount++; | ||
return { | ||
count: state.count + 1, | ||
}; | ||
}); | ||
|
||
// Callback should be invoked twice | ||
expect(setStateCount).toBe(2); | ||
// But each time `state` should be the previous value | ||
expect(instance.state.count).toBe(2); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters