Тестирование магазина React с фиктивными функциями - PullRequest
Новая
       6

Тестирование магазина React с фиктивными функциями

0 голосов
/ 08 ноября 2019

Я новичок в реакции и развитии в целом. Я хочу, чтобы юнит-тест реагировал store.dispatch на действие и возвращал ли он соответствующие type и payload. Моя текущая структура кода имеет нижнюю функцию, которая должна быть выполнена до того, как она возвратит ожидаемые type и payload.

Пример: 

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

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

Вопрос в том, какМогу ли я выполнить юнит-тест выше store.dispatch с помощью Jest? Нужно ли издеваться или можно издеваться над someFunction(number) и как это сделать?

Большое спасибо.

1 Ответ

1 голос
/ 08 ноября 2019

Вот решение для модульного теста, вы можете использовать jest.spyOn (object, methodName, accessType?) для этого.

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);
  });
});

Результат модульного теста со 100% покрытием: 

 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

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58757332

...