CODEWITHSUNDEEP
reactjsunit-testingjestjs
robotYourWay
robotYourWay

Reputation: 46

Testing React store with mock functions

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.

Upvotes: 0

Views: 52

Answers (1)

Lin Du
Lin Du

Reputation: 102267

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

Upvotes: 1

Related Questions