Unit tests on react with Jest: how to mock an action from different feature?

Question

I am currently doing unit tests on with Jest on one of my react services (using redux-saga). These services call API, selectors and actions which are outside from the other API, selectors, and actions specific to this service.

So to mock these outside API, selectors, and actions, I used jest to mock them in my test file like this:

// API mock example
jest.mock('../otherFeatureService/api'), () => {
    return { myApi: jest.fn() };
}

// reducer mock example
jest.mock('../otherFeatureService/reducer'), () => {
    return { isConnected: (fake) => jest.fn(fake) };
}

// API action example
jest.mock('../otherFeatureService/actions'), () => {
    return { myAction: () => jest.fn() };
}

Everything works fine in my tests, except the mock actions. However, I got the below message when I tried to compare my expected result with the one I got for my mock actions:

expect(received).toEqual(expected)

Expected value to equal:
  {"@@redux-saga/IO": true, "PUT": {"action": [Function mockConstructor], "channel": null}}
Received:
  {"@@redux-saga/IO": true, "PUT": {"action": [Function mockConstructor], "channel": null}}

Difference:

Compared values have no visual difference.

Do you have any ideas about why it doesn't work only for actions? (I am using sagaHelper from 'redux-saga-testing' for my tests)

Thanks. printfx000.

Generally, ES functions will be never equal, even if them have equalent code and name. In your case action is not invoked actually, so maybe in some place of test, you pass action function directly, but must pass it's result, which is plain serializable object. — Vladislav Ihost, Jul 19 '17 at 07:42

score 0 · Answer 1 · answered Oct 05 '17 at 11:33

You're experiencing this issue because jest cannot make the difference between 2 anonymous function. In order to fix that, you'll need to provide a named function to you mock. Because jest hoist mock declarations, you'll need to declare your named function inside your mock.

jest.mock('../selectors', () => {

    function mockedMakeSelectCoverageResult() {}

    return ({
        makeSelectCoverageResult: () => mockedMakeSelectCoverageResult,
    });

});

expect(descriptor).toEqual(select(makeSelectCoverageResult()));

Unit tests on react with Jest: how to mock an action from different feature?

1 Answers1