From 5b1ec4c5ff44c2262f43bdb3e153e702a4d2f4f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Fri, 22 Mar 2019 17:06:34 +0100 Subject: [PATCH] Updated outdated SSR-test (dispatch in ancestors) --- test/integration/server-rendering.spec.js | 92 +++++++++++------------ 1 file changed, 43 insertions(+), 49 deletions(-) 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' } }