diff --git a/test/integration/server-rendering.spec.js b/test/integration/server-rendering.spec.js
index 72b7a5efd..dbf172241 100644
--- a/test/integration/server-rendering.spec.js
+++ b/test/integration/server-rendering.spec.js
@@ -28,6 +28,28 @@ describe('React', () => {
)
+ class Dispatcher extends React.Component {
+ constructor(props) {
+ super(props)
+ if (props.constructAction) {
+ props.dispatch(props.constructAction)
+ }
+ }
+ UNSAFE_componentWillMount() {
+ if (this.props.willMountAction) {
+ this.props.dispatch(this.props.willMountAction)
+ }
+ }
+ render() {
+ if (this.props.renderAction) {
+ this.props.dispatch(this.props.renderAction)
+ }
+
+ return
+ }
+ }
+ const ConnectedDispatcher = connect()(Dispatcher)
+
it('should be able to render connected component with props and state from store', () => {
const store = createStore(greetingReducer)
@@ -71,7 +93,7 @@ describe('React', () => {
expect(store.getState().greeting).toContain('Hi')
})
- it.skip('should render children with original state even if actions are dispatched in ancestor', () => {
+ it('should render children with updated state if actions are dispatched in ancestor', () => {
/*
Dispatching during construct, render or willMount is
almost always a bug with SSR (or otherwise)
@@ -79,40 +101,35 @@ describe('React', () => {
This behaviour is undocumented and is likely to change between
implementations, this test only verifies current behaviour
- Note: this test passes in v6, because we use context to propagate the store state, and the entire
+ Note: this test fails in v6, because we use context to propagate the store state, and the entire
tree will see the same state during the render pass.
-
In all other versions, including v7, the store state may change as actions are dispatched
during lifecycle methods, and components will see that new state immediately as they read it.
*/
const store = createStore(greetingReducer)
- class Dispatcher extends React.Component {
- constructor(props) {
- super(props)
- props.dispatch(props.action)
- }
- UNSAFE_componentWillMount() {
- this.props.dispatch(this.props.action)
- }
- render() {
- this.props.dispatch(this.props.action)
-
- return
- }
- }
- const ConnectedDispatcher = connect()(Dispatcher)
-
- const action = { type: 'Update', payload: { greeting: 'Hi' } }
+ const constructAction = { type: 'Update', payload: { greeting: 'Hi' } }
+ const willMountAction = { type: 'Update', payload: { greeting: 'Hiya' } }
+ const renderAction = { type: 'Update', payload: { greeting: 'Hey' } }
const markup = renderToString(
-
+
+
+
)
- expect(markup).toContain('Hello world')
- expect(store.getState().greeting).toContain('Hi')
+ expect(markup).toContain('Hi world')
+ expect(markup).toContain('Hiya world')
+ expect(markup).toContain('Hey world')
+ expect(store.getState().greeting).toContain('Hey')
})
it('should render children with changed state if actions are dispatched in ancestor and new Provider wraps children', () => {
@@ -122,35 +139,12 @@ describe('React', () => {
This behaviour is undocumented and is likely to change between
implementations, this test only verifies current behaviour
+
+ This test works both when state is fetched directly in connected
+ components and when it is fetched in a Provider and placed on context
*/
const store = createStore(greetingReducer)
- class Dispatcher extends React.Component {
- constructor(props) {
- super(props)
- if (props.constructAction) {
- props.dispatch(props.constructAction)
- }
- }
- UNSAFE_componentWillMount() {
- if (this.props.willMountAction) {
- this.props.dispatch(this.props.willMountAction)
- }
- }
- render() {
- if (this.props.renderAction) {
- this.props.dispatch(this.props.renderAction)
- }
-
- return (
-
-
-
- )
- }
- }
- const ConnectedDispatcher = connect()(Dispatcher)
-
const constructAction = { type: 'Update', payload: { greeting: 'Hi' } }
const willMountAction = { type: 'Update', payload: { greeting: 'Hiya' } }
const renderAction = { type: 'Update', payload: { greeting: 'Hey' } }