Testing a React Store with Jest

Question

I'm trying to test my React store using Jest (I'm adhering to the Flux architecture) but am not sure when I need to mock up a store function. To illustrate my point, here's a portion of my store code:

export default class AdminStore extends EventEmitter {
   constructor() {
       super();
       this.users = [];
       this.userTotal = 0;
       this.profile = {};

       AdminDispatcher.register((payload) => {
           switch (payload.eventName) {
               case AdminConstants.USER_TOTAL:
                   this.userTotal = payload.total;
                   this.emit('change');
               break;

               case AdminConstants.ALL_USERS:
                   this.users = payload.users;
                   this.emit('change');
               break;

               case AdminConstants.FETCH_USER:
                   this.profile = payload.profile;
                   this.emit('change');
               break;

               default:

               break;
           }
           return true;
       });
   }

   syncUsers() {
       return this.users;
   }

   syncUserTotal() {
       return this.userTotal;
   }

   syncProfile() {
       return this.profile;
   }
}

Here's a snippet of my Jest test code:

jest.dontMock('../AdminStore.js');
jest.dontMock('../../constants/AdminConstants.js');

describe('AdminStore', () => {
    let callback;
    let AdminStore;
    let AdminDispatcher;
    let AdminConstants = require('../../constants/AdminConstants.js');

    beforeEach(() => {
        AdminStore = require('../AdminStore.js');
        AdminDispatcher = require('../../dispatcher/AdminDispatcher.js');
        callback = AdminDispatcher.register.mock.calls[0];
    });
    it ('should initialize with a user total of 0', () => {
        let total = AdminStore.syncUserTotal();
        expect(total).toEqual(0);
    });
});

My Jest output for this test looks like this:

● AdminStore › it should initialize with a user total of 0
  - TypeError: undefined is not a function
    at Spec.<anonymous> (/Users/seanchen/karma/admin-new/src/js/stores/__tests__/AdminStore-test.js:34:32)
    at jasmine.Block.execute (/Users/seanchen/karma/admin-new/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
    at jasmine.Queue.next_ (/Users/seanchen/karma/admin-new/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
    at null._onTimeout (/Users/seanchen/karma/admin-new/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)
1 test failed, 1 test passed (2 total)
Run time: 3.493s

Does AdminStore.syncUserTotal() need to be mocked? I'm really not sure why it's undefined.

can you post the code around line 34. we dont get to see line numbers — PhilVarg, May 08 '15 at 18:28
Line 34 is `let total = AdminStore.syncUserTotal();` in the Jest code. — seanchen1991, May 08 '15 at 18:41

score 0 · Accepted Answer · answered May 08 '15 at 19:09

You don't have an instance of AdminStore.

Your AdminStore is exporting the class itself, not an instance of the class.

Try something like

it ('should initialize with a user total of 0', () => {
    let adminStore = new AdminStore();
    let total = adminStore.syncUserTotal();
    expect(total).toEqual(0);
});

Testing a React Store with Jest

1 Answers1