我是 react 和 redux 的初學者，我撰寫了一個非常簡單的應用程式來學習它，您可以在其中添加帶有描述、日期和注釋的費用。
我正在開玩笑地測驗我的一個減速器，但我得到了一個我無法理解的錯誤。我可能錯過了一些東西，但我無法弄清楚，所以如果你能幫助我，那就太好了。
所以我有一個帶有 reducer 操作 addExpense 的費用切片，它準備負載，只需添加一個 ID 并在必要時設定默認值并將其添加到之前的狀態。
import { createSlice } from "@reduxjs/toolkit"
import { nanoid } from "nanoid"
const expensesDefaultState = []
const expensesSlice = createSlice({
name: 'expenses',
initialState: expensesDefaultState,
reducers: {
addExpense: {
reducer: (state, action) => {
return [
...state,
action.payload
]
},
prepare: (payload) => {
return {
payload: {
id: nanoid(),
description: payload.description ? payload.description : '',
note: payload.note ? payload.note : '',
amount: payload.amount ? payload.amount : 0,
createdAt: payload.createdAt ? payload.createdAt : 0
}
}
}
}
在我的測驗檔案中，當我測驗操作時，測驗正確通過，如下所示：
describe('Expenses actions', () => {
it('should returns an addExpense action object with prepared payload', () => {
const newExpense = {
description: 'this is a description',
amount: 1000,
createdAt: 0,
note: 'this is anote'
}
expect(addExpense(newExpense)).toEqual({
type: 'expenses/addExpense',
payload: {
id: expect.any(String),
description: 'this is a description',
amount: 1000,
createdAt: 0,
note: 'this is a note'
}
})
})
但是，當我用相同的操作測驗減速器并期望它失敗時，我得到了沒有 ID 的物件，如下所示：
describe('Expense Reducer', () => {
it('should add an expense', () => {
const newExpense = {
description: 'my new expense',
amount: 1000,
createdAt: 0,
note: 'this is a note'
}
const state = expenseReducer([], {
type: 'expenses/addExpense',
payload: newExpense
})
expect(state).toEqual([
{
id: expect.any(String),
description: 'my new expense',
amount: 1000,
createdAt: 0,
note: 'this is a note'
}
])
})
})
和錯誤：
● Expense Reducer ? should add an expense
expect(received).toEqual(expected) // deep equality
- Expected - 1
Received 0
Array [
Object {
"amount": 1000,
"createdAt": 0,
"description": "my new expense",
- "id": Any<String>,
"note": "this is a note",
},
]
我在這里遺漏了什么或理解不正確？先感謝您 ！
uj5u.com熱心網友回復：
因為您expensesSlice.reducer直接運行該函式，所以它是一個純函式。所以準備回呼不會執行。您可以使用store.dispatch(addExpense(newExpense))觸發prepare回呼并測驗狀態切片的變化。
createSlice()將用于createAction()創建帶有或不帶有prepare回呼的動作創建者，并將這些動作創建者匯出為stateSlice.actions屬性。見v1.7.2/packages/toolkit/src/createSlice.ts#L294
當動作創建者執行 likeaddExpense(newExpense)時，它??將使用準備回呼來自定義動作內容（id: nanoid()在您的情況下）。
例如
index.ts：
import { createSlice, nanoid } from '@reduxjs/toolkit';
const expensesDefaultState = [];
const expensesSlice = createSlice({
name: 'expenses',
initialState: expensesDefaultState,
reducers: {
addExpense: {
reducer: (state, action) => {
return [...state, action.payload];
},
prepare: (payload) => {
return {
payload: {
id: nanoid(),
description: payload.description ? payload.description : '',
note: payload.note ? payload.note : '',
amount: payload.amount ? payload.amount : 0,
createdAt: payload.createdAt ? payload.createdAt : 0,
},
}
},
},
},
});
export const { addExpense } = expensesSlice.actions;
export default expensesSlice.reducer;
index.test.ts：
import { configureStore, nanoid } from '@reduxjs/toolkit';
import expenseReducer, { addExpense } from '.';
describe('Expenses actions', () => {
it('should returns an addExpense action object with prepared payload', () => {
const newExpense = {
description: 'this is a description',
amount: 1000,
createdAt: 0,
note: 'this is a note',
};
expect(addExpense(newExpense)).toEqual({
type: 'expenses/addExpense',
payload: {
id: expect.any(String),
description: 'this is a description',
amount: 1000,
createdAt: 0,
note: 'this is a note',
},
});
});
it('should add an expense', () => {
const newExpense = {
id: nanoid(),
description: 'my new expense',
amount: 1000,
createdAt: 0,
note: 'this is a note',
};
const state = expenseReducer([], {
type: 'expenses/addExpense',
payload: newExpense,
});
expect(state).toEqual([
{
id: expect.any(String),
description: 'my new expense',
amount: 1000,
createdAt: 0,
note: 'this is a note',
},
]);
});
it('should add an expense - 2', () => {
const newExpense = {
description: 'my new expense',
amount: 1000,
createdAt: 0,
note: 'this is a note',
};
const store = configureStore({ reducer: expenseReducer });
store.dispatch(addExpense(newExpense));
expect(store.getState()).toEqual([
{
id: expect.any(String),
description: 'my new expense',
amount: 1000,
createdAt: 0,
note: 'this is a note',
},
]);
});
});
測驗結果：
PASS stackoverflow/72677850/index.test.ts (10.106 s)
Expenses actions
? should returns an addExpense action object with prepared payload (2 ms)
? should add an expense (1 ms)
? should add an expense - 2 (2 ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 10.577 s, estimated 13 s
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/494262.html
標籤：javascript 单元测试 还原 开玩笑的 redux 工具包
下一篇：C#專案參考警告型別沖突