Redux-saga-test-plan expectSaga seems to retain state between independent tests

Question

I have the below two tests

import {put, select, takeEvery} from 'redux-saga/effects';
import {combineReducers} from 'redux';

export default class SessionReducer {
    public static readonly _initialState: any = {
        disconnectCounts: {},
    };

    public static reducer(state: any = SessionReducer._initialState, action: any): any {
        // console.log('reducer', action);
        let newState: any;
        switch (action.type) {
            case 'DEVICE_DISCONNECTED':
                newState = {
                    ...state,
                };
                if (!newState.disconnectCounts[action.value]) newState.disconnectCounts[action.value] = 0;
                newState.disconnectCounts[action.value]++;
                newState.error = {
                    type: 'DEVICE_DISCONNECTED',
                    utc: 1,
                };

                return newState;
            default:
                return state;
        }
    }
}

export function* errorHandler() {
    yield takeEvery(['DEVICE_DISCONNECTED'], function* (action: any) {
        let state = yield select();
        console.log('*********', state);
        if (state.session.disconnectCounts[action.value] > 1) {
            yield put({
                type: 'WATCH_REBOOT_REQUEST',
            });
            // state.session.disconnectCounts[action.value] = 0
        }
    });
}
let action = {type: 'DEVICE_DISCONNECTED', value: '111'};
describe('Handles Error States and Transitions', () => {
    test('Sends watch reboot request when disconnection count threshold met', () => {
        return expectSaga(errorHandler)
            .withReducer(
                combineReducers({
                    session: SessionReducer.reducer,
                }),
                {session: SessionReducer._initialState},
            )
            .dispatch(action)
            .dispatch(action)
            .put({type: 'WATCH_REBOOT_REQUEST'})
            .run()
            .then((result: {storeState: any}) => {
                debugger;

                let session = result.storeState.session;
                expect(session.disconnectCounts[action.value]).toBe(2); // values for error are tested in reducer test
                expect(session.error).toBeTruthy(); // values for error are tested in reducer test
            });
    });
    test('Does not send WATCH_REBOOT_REQUEST when threshold not met', () => {
        return expectSaga(errorHandler)
            .withReducer(
                combineReducers({
                    session: SessionReducer.reducer,
                }),
                {session: SessionReducer._initialState},
            )
            .dispatch(action)
            .run()
            .then((result: {storeState: any}) => {
                let session = result.storeState.session;
                expect(session.disconnectCounts[action.value]).toBe(1); // values for error are tested in reducer test
                // expect(session.currentScreen).toEqual('actionRequiredIdleScreen');
            });
    });
});

If you run each test independently, i used .only, they pass but run them without .only and the second test always fails w/ too many values in disconnectCounts

  Handles Error States and Transitions
    ✓ Sends watch reboot request when disconnection count threshold met (263 ms)
    ✕ Does not send WATCH_REBOOT_REQUEST when threshold not met (258 ms)

  ● Handles Error States and Transitions › Does not send WATCH_REBOOT_REQUEST when threshold not met

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 3

      76 |             .then((result: {storeState: any}) => {
      77 |                 let session = result.storeState.session;
    > 78 |                 expect(session.disconnectCounts[action.value]).toBe(1); // values for error are tested in reducer test
         |                                                                ^
      79 |                 // expect(session.currentScreen).toEqual('actionRequiredIdleScreen');
      80 |             });
      81 |     });

      at __tests__/sagas/sagaStateIssue.ts:78:64
      at tryCallOne (node_modules/promise/lib/core.js:37:12)
      at node_modules/promise/lib/core.js:123:15
      at flush (node_modules/asap/raw.js:50:29)

What o what am I missing?

Answer 1

Putting the reducer and state together in a class is an anti-pattern of redux.

const initialState = () => ({ disconnectCounts: {} });
const reducer = (state: any = initialState(), action: any): any => {

You are holding on to a single reference for initialState It's better to have a function that returns a new instance

https://codesandbox.io/s/proud-morning-0w4wu?file=/src/testy.test.ts:175-182

Here is a sandbox with the tests running

Answer 2

I think the problem is that both tests use the same reference of SessionReducer._initialState. When you pass it to the state in withReducer, it isn't cloned in any way and so you end up working with the same object in memory.

There is lots of way how to fix it, e.g. you can have a method instead of a property to create the initial object:

_initialState = () => ({disconnectCounts: {}})
// ...
.withReducer(
  combineReducers({
    session: SessionReducer.reducer,
  }),
  {session: SessionReducer._initialState()},
)

or you can deeply clone the object yourself in the test

const deepClone = obj => JSON.parse(JSON.stringify(obj))
// ...
.withReducer(
  combineReducers({
    session: SessionReducer.reducer,
  }),
  {session: deepClone(SessionReducer._initialState)},
)