I am using Redux inside of a create-react-app application, jest included.

Task

Add a new REST resource named wadget to the existing reducers function. Using TDD.

// reducers.js
import {combineReducers} from 'redux'

import widget from './widget'

export default combineReducers({
    widget
})

As a kata today, I wanted to mock out this function that executes at import time. I am still learning the JavaScript ecosystem. I could do this in Python...

Let's pause for a moment... because it sounds pretty ridiculous. Languages allow imports to execute non-encapsulated code procedurally. Side effects within these files alter the state of the running system when the instruction pointer links to the file.

Let's connect to a database when we import the DAO base file!

Test

I struggled with this for a little bit today. I asked a question on stack overflow.

// reducers.test.js
import redux from 'redux'
import widget from './widget'

describe('Use jest', () => {
    afterEach(() => {
        jest.resetModules()
    });

    test('first test', () => {
        jest.doMock('redux');

        require('./reducers');
        let {combineReducers} = require('redux');

        expect(combineReducers).toBeCalledWith({"widget": widget})
    });
});

Coding Steps

At this point, since I have the invocation of combinedReducers isolated, I can update my test to expect another resource type, wadget.

(red) FAIL Test

import widget from './widget'
import wadget from './wadget'
// ...
expect(combineReducers).toBeCalledWith({
  "widget": widget,
  "wadget": wadget
})

(green) SUCCESS

// reducers.js
import {combineReducers} from 'redux'

import widget from './widget'
import widget from './wadget'

export default combineReducers({
    widget,
    wadget
})