Testing React store with mock functions

Question

I'm new to react and development in general. I want to unit test react store.dispatch action and whether it returns the corresponding type and payload. My current code structure is having an underneath function to be executed before it returns the expected type and payload.

Example:

export function requestForSomething(number){
  store.dispatch(getData(number));
}

export const getData = number => {
  const productDetails = someFunction(number);
  return { 
    type: GET_DATA,
    productDetails,
  };
}

The question is, how can I unit test the above store.dispatch with Jest? Is it required to mock or can I mock someFunction(number) and how to do that.

Thank you very much.

Lin Du · Accepted Answer · 2019-11-08 04:27:14Z

Here is a unit test solution, you can use jest.spyOn(object, methodName, accessType?) to do this.

index.ts:

import { createStore } from 'redux';

function reducer(state = {}) {
  return state;
}

export const store = createStore(reducer);

export const GET_DATA = 'GET_DATA';

export function requestForSomething(number) {
  store.dispatch(getData(number));
}

export const getData = number => {
  const productDetails = someFunction(number);
  return {
    type: GET_DATA,
    productDetails
  };
};

export const someFunction = number => {
  return number;
};

index.spec.ts:

import * as mod from './';

describe('test suites', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });
  it('#requestForSomething', () => {
    const action = { type: 'GET_DATA', productDetails: {} };
    const spy = jest.spyOn(mod, 'getData').mockReturnValueOnce(action);
    const dispatchSpy = jest.spyOn(mod.store, 'dispatch');
    mod.requestForSomething(1);
    expect(spy).toBeCalledWith(1);
    expect(dispatchSpy).toBeCalledWith(action);
  });

  it('#getData', () => {
    const spy = jest.spyOn(mod, 'someFunction').mockReturnValueOnce({});
    const actualValue = mod.getData(1);
    expect(actualValue).toEqual({ type: 'GET_DATA', productDetails: {} });
    expect(spy).toBeCalledWith(1);
  });

  it('#someFunction', () => {
    const actualValue = mod.someFunction(1);
    expect(actualValue).toBe(1);
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/58757332/index.spec.ts (7.351s)
  test suites
    ✓ #requestForSomething (5ms)
    ✓ #getData (1ms)
    ✓ #someFunction

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        8.659s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58757332

Thank you very much. This really helped. This is exactly what I was after.

Collectives™ on Stack Overflow

Testing React store with mock functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related