Jest React Redux Тестирование - PullRequest
Новая
       21

Jest React Redux Тестирование

0 голосов
/ 18 октября 2018

Я новичок в redux и хочу знать, как тестировать Actions и Reducers.

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

Я использую Jest для модульного тестирования.

URL-адрес http://localhost:30001.

Просто хочу узнать, как можно провести тестирование и как я могу использовать fetch в своем тестеслучаи и что я могу указать в качестве ожидаемого результата.

Страница действий 

import {
  REQUEST_CHARITIES,
  REQUEST_PAYMENT,
  SHOW_DONATION_AMOUNT_LIST,
  UPDATE_DONATION_AMOUNT_LIST,
  URL,
  PAY_NOW,
  UPDATE_MESSAGE,
  UPDATE_TOTAL_DONATE
} from './const';

//get list of all the charities
export function requestCharitiesList() {
  const request = fetch(`${URL}/charities`, {
      method: 'GET'
  }).then(response => response.json())
  return {
      type: REQUEST_CHARITIES,
      payload: request
  }
}

//get list of all payment amount
export function requestDonationAmount() {
  return {
      type: REQUEST_PAYMENT,
      payload: [{
              "id": 0,
              "price": 10
          },
          {
              "id": 1,
              "price": 20
          },
          {
              "id": 2,
              "price": 50
          },
          {
              "id": 3,
              "price": 100
          },
          {
              "id": 4,
              "price": 500
          },
      ]
  }
}

//get the total count of charities and update the payment options list visibility
export function showDonationList() {
  const paymentOptionsShow = []
  const request = fetch(`${URL}/charities`, {
      method: 'GET'
  }).then( response =>  response.json())
  request.then(function(result) {
    if(result.length >= 1){
      let arrayLength = result.length

      for( var i = 0 ; i < arrayLength ; i++ ) {
        paymentOptionsShow.push({active: false });
      }  
    }
 })

  return {
      type: SHOW_DONATION_AMOUNT_LIST,
      payload: paymentOptionsShow
  }
}

//to show and hide the payment options for each card
export function updateDonationList(list,id){
  return {
    type: UPDATE_DONATION_AMOUNT_LIST,
    payload: {
        "list": list,
        "id": id
        }
  }
}


//post the current paid amount
export function payNow(id, amount, currency) {
  const request = fetch(`${URL}/payments`, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: `{ "charitiesId": ${id}, "amount": ${amount}, "currency": "${currency}" }`
  })
  .then(response => response.json())
  return {
    type: PAY_NOW,
    payload: request
  }
}

//show thank you message
export function updateMessage(message) {
  return {
    type: UPDATE_MESSAGE,
    message: message
  }
}

//get the total number of payments made
export function summaryTotal() {
  const request = fetch(`${URL}/payments`,
    { method: 'GET' }).then(response => response.json())
  return {
    type: UPDATE_TOTAL_DONATE,
    payload: request
  }
}

Один из моих редукторов 

import {
  REQUEST_CHARITIES
} from '../actions/const'

export default function (state = null, action) {
  switch (action.type) {
    case REQUEST_CHARITIES:
      return action.payload
    default:
      return state;
  }
}

1 Ответ

0 голосов
/ 18 октября 2018

Итак, это простой пример того, как мой комментарий может работать.Понять? 

describe('Test case', () => {

  it('should return a new state', () => {
    const myReducer = nameOfReducer( { state }, { action } );

    expect(myReducer).toEqual({ state });
  });
});
...