Jest React Redux Testing

Question

我是 redux 的新手，我想知道如何测试动作和化简器。

我已经附上了这两个文件的副本，并希望任何人帮助我可以使用的通用模式。

我正在使用Jest进行单元测试。

网址 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;
}
}

Answer 1

因此，这是我的评论如何工作的简单示例。理解？

describe('Test case', () => {
it('should return a new state', () => {
const myReducer = nameOfReducer( { state }, { action } );
expect(myReducer).toEqual({ state });
});
});