Jest mocking - Mock named exports except for one

Question

I have a redux file that contains my reducer and all of my actions via named exports.

export const reducer = (state, action) => ...

export myAction = action => {
    return {type: 'ACTION', action}
}
...

When in my test file I import the reducer and the actions. I have a renderWithRedux which takes in the reducer and creates a real store inside.

function renderWithRedux(ui, reducer = combineReducers(reducers), initialState = {}) {
    const store = createStore(reducer, initialState)
    const utils = render(<Provider store={store}>{ui}</Provider>)

    return {
        ...utils,
        store,
    }
}

The question I have is that the component I'm rendering is passed actions in the mapDispatchToProps in the connected component.

export default connect(mapStateToProps, { myAction })(MyComponent)

I want to mock the myAction in my particular use case this action would actually be a thunk and I want to see if the store updated.

The problem I have is how do I mock myAction but not the reducer. I've tried

jest.mock('./reducerFile', () => {
    return jest.fn().mockImplementation(() => {
        return {
            reducer: require.requireActual('./reducerFile').reducer,
            myAction: jest.fn()
        }
    })
})

But the reducer is still mocked somehow.

Is this even possible or am I just wanderlust.

Answer 1

You can try this workaround:

jest.mock('./reducerFile', () => {
  const moduleMock = jest.requireActual(
    './reducerFile'
  );

  return {
    ...moduleMock,
    myAction: jest.fn(),
  };
});