From 9e4e1c54fabbe1d8cd2ccbf3c4eed9dbbdbc5c8f Mon Sep 17 00:00:00 2001 From: Max Kostow Date: Thu, 21 Mar 2019 10:30:27 -0700 Subject: [PATCH] add non-batched tests --- test/components/connect.spec.js | 103 +++++++++++++++++++++++++++++++- 1 file changed, 102 insertions(+), 1 deletion(-) diff --git a/test/components/connect.spec.js b/test/components/connect.spec.js index 7b27fb2b0..65a8581ed 100644 --- a/test/components/connect.spec.js +++ b/test/components/connect.spec.js @@ -4,7 +4,7 @@ import React, { Component } from 'react' import createClass from 'create-react-class' import PropTypes from 'prop-types' import ReactDOM from 'react-dom' -import { createStore } from 'redux' +import { createStore, applyMiddleware } from 'redux' import { Provider as ProviderMock, connect } from '../../src/index.js' import * as rtl from 'react-testing-library' import 'jest-dom/extend-expect' @@ -2954,5 +2954,106 @@ describe('React', () => { connect()(createComp('div')) }).not.toThrow() }) + + it('should invoke mapState always with latest props', () => { + const store = createStore((state = 0) => state + 1) + + let propsPassedIn + + @connect(reduxCount => { + return { reduxCount } + }) + class InnerComponent extends Component { + render() { + propsPassedIn = this.props + return + } + } + + class OuterComponent extends Component { + constructor() { + super() + this.state = { count: 0 } + } + + render() { + return + } + } + + let outerComponent + rtl.render( + + (outerComponent = c)} /> + + ) + outerComponent.setState(({ count }) => ({ count: count + 1 })) + store.dispatch({ type: '' }) + + expect(propsPassedIn.count).toEqual(1) + expect(propsPassedIn.reduxCount).toEqual(2) + }) + + it('should use the latest props when updated between actions', () => { + const store = applyMiddleware(store => { + let callback + return next => action => { + if (action.type === 'SET_COMPONENT_CALLBACK') { + callback = action.payload + } + if (callback && action.type === 'INC1') { + next(action) + callback() + store.dispatch({ type: 'INC2' }) + return + } + next(action) + } + })(createStore)((state = 0, action) => { + if (action.type === 'INC1') { + return state + 1 + } else if (action.type === 'INC2') { + return state + 2 + } + return state + }) + const Child = connect(count => ({ count }))(function(props) { + return ( +
+ ) + }) + class Parent extends Component { + constructor() { + super() + this.state = { + prop: 'a' + } + this.inc1 = () => store.dispatch({ type: 'INC1' }) + store.dispatch({ + type: 'SET_COMPONENT_CALLBACK', + payload: () => this.setState({ prop: 'b' }) + }) + } + + render() { + return ( + + + + ) + } + } + let parent + const rendered = rtl.render( (parent = ref)} />) + expect(rendered.getByTestId('child').dataset.count).toEqual('0') + expect(rendered.getByTestId('child').dataset.prop).toEqual('a') + parent.inc1() + expect(rendered.getByTestId('child').dataset.count).toEqual('3') + expect(rendered.getByTestId('child').dataset.prop).toEqual('b') + }) }) })