diff --git a/playground/src/connected/fc-counter-connected-bind-action-creators.spec.tsx b/playground/src/connected/fc-counter-connected-bind-action-creators.spec.tsx new file mode 100644 index 00000000..8246b7d3 --- /dev/null +++ b/playground/src/connected/fc-counter-connected-bind-action-creators.spec.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { act, fireEvent, render, screen } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { AnyAction, applyMiddleware, combineReducers, createStore } from 'redux'; +import thunk from 'redux-thunk'; + +import { FCCounterConnectedBindActionCreators as ConnectedCounter } from './fc-counter-connected-bind-action-creators'; + +const reducer = combineReducers({ + counters: combineReducers({ + reduxCounter: (state: number = 0, action: AnyAction) => { + switch (action.type) { + case 'counters/INCREMENT': + return state + 1; + + default: + return state; + } + }, + }), +}); + +afterEach(() => { + jest.useRealTimers(); +}); + +test('can dispatch the delayed increment thunk', async () => { + jest.useFakeTimers(); + + const label = 'Counter 1'; + renderWithRedux(); + + expect(screen.getByText(`${label}: 0`)).toBeTruthy(); + fireEvent.click(screen.getByText('Increment')); + + await act(async () => { + jest.advanceTimersByTime(1000); + }); + + expect(screen.getByText(`${label}: 1`)).toBeTruthy(); +}); + +function renderWithRedux( + jsx: JSX.Element, + options: { initialState?: object } = {} +) { + const store = createStore( + reducer, + options.initialState, + applyMiddleware(thunk) + ); + + return render({jsx}); +} \ No newline at end of file diff --git a/playground/src/store/store.ts b/playground/src/store/store.ts index baca7aee..fea72863 100644 --- a/playground/src/store/store.ts +++ b/playground/src/store/store.ts @@ -1,6 +1,7 @@ import { RootAction, RootState, Services } from 'MyTypes'; import { applyMiddleware, createStore } from 'redux'; import { createEpicMiddleware } from 'redux-observable'; +import thunk from 'redux-thunk'; import services from '../services'; import { routerMiddleware } from './redux-router'; @@ -18,7 +19,7 @@ const epicMiddleware = createEpicMiddleware< }); // configure middlewares -const middlewares = [epicMiddleware, routerMiddleware]; +const middlewares = [thunk, epicMiddleware, routerMiddleware]; // compose enhancers const enhancer = composeEnhancers(applyMiddleware(...middlewares));