Chai 的 Redux 测试问题
Redux testing issue with Chai
我正在学习 react redux,我目前正在使用 TDD 实现一些 reducer。我正在使用示例应用程序,它只是 adding/removing/opening/closing 笔记的记事本。
我正在做一些添加新笔记的测试,但是第二个 "it" 失败了,抛出的错误如下:
1) AddNote reducer 应该return两个注释:
AssertionError:预期 { Object (id-123, id-456) } 等于 { Object (byId, ids, ...) }
describe('AddNote reducer' , () => {
it('should return a new note', () => {
const state = getMockState.withNoNotes();
const actualNextState = reducers.byId(
state.byId, actions.addNote(
'Hello World', 'id-123', 1));
const expectedNextState = {
'id-123': {
id: 'id-123',
content: 'Hello World',
timestamp: 1
}
};
expect(actualNextState).to.deep.equal(expectedNextState);
});
it('should return two notes', () => {
const state = getMockState.withOneNote();
const actualNextState = reducers.byId(state.byId, actions.addNote('Bye bye world!', 'id-456', 2));
const expectedNextState = {
...state,
'id-456': {
id: 'id-456',
content: 'Bye bye world!',
timestamp: 2
}
};
expect(actualNextState).to.deep.equal(expectedNextState);
});
});
我也在用一个帮手,这里是
export const getMockState = {
withNoNotes: () => ({
byId: {},
ids: [],
openNoteId: null,
}),
withOneNote: () => ({
byId: {
'id-123': {
id: 'id-123',
content: 'Hello world',
timestamp: 1,
},
},
ids: ['id-123'],
openNoteId: 'id-123',
}),
};
我的想法是,如果我在第一种情况下添加一个音符,它将 return 一个只有该音符的新状态,但在第二种情况下,它应该 return 一个具有前一个音符的状态注意,加上新的。
我正在使用 Chai expect 库和 mocha。
如果有帮助,这是状态输出(它是控制台日志),我认为没问题,
{ 'id-123': { id: 'id-123', content: 'Hello World', timestamp: 1 } }
√ should return a new note
{ 'id-123': { id: 'id-123', content: 'Hello world', timestamp: 1 },
'id-456': { id: 'id-456', content: 'Bye bye world!', timestamp: 2 } }
1) should return two notes
这是我的减速器
import { merge } from 'ramda';
export const byId = (state={}, {type, payload}) => {
switch(type) {
case 'app/addNote':
console.log(merge(state, { [payload.id]: payload})) ;
return merge(state, { [payload.id]: payload});
default:
return state;
}
};
有什么想法吗?提前致谢!
您的expectedState
不正确。您正在比较 byId
切片的 "next state",但您的 expectedNextState
扩展了整个状态。它实际上应该是:
const expectedNextState = {
...state.byId,
'id-456': {
id: 'id-456',
content: 'Bye bye world!',
timestamp: 2
}
};
我正在学习 react redux,我目前正在使用 TDD 实现一些 reducer。我正在使用示例应用程序,它只是 adding/removing/opening/closing 笔记的记事本。
我正在做一些添加新笔记的测试,但是第二个 "it" 失败了,抛出的错误如下:
1) AddNote reducer 应该return两个注释: AssertionError:预期 { Object (id-123, id-456) } 等于 { Object (byId, ids, ...) }
describe('AddNote reducer' , () => {
it('should return a new note', () => {
const state = getMockState.withNoNotes();
const actualNextState = reducers.byId(
state.byId, actions.addNote(
'Hello World', 'id-123', 1));
const expectedNextState = {
'id-123': {
id: 'id-123',
content: 'Hello World',
timestamp: 1
}
};
expect(actualNextState).to.deep.equal(expectedNextState);
});
it('should return two notes', () => {
const state = getMockState.withOneNote();
const actualNextState = reducers.byId(state.byId, actions.addNote('Bye bye world!', 'id-456', 2));
const expectedNextState = {
...state,
'id-456': {
id: 'id-456',
content: 'Bye bye world!',
timestamp: 2
}
};
expect(actualNextState).to.deep.equal(expectedNextState);
});
});
我也在用一个帮手,这里是
export const getMockState = {
withNoNotes: () => ({
byId: {},
ids: [],
openNoteId: null,
}),
withOneNote: () => ({
byId: {
'id-123': {
id: 'id-123',
content: 'Hello world',
timestamp: 1,
},
},
ids: ['id-123'],
openNoteId: 'id-123',
}),
};
我的想法是,如果我在第一种情况下添加一个音符,它将 return 一个只有该音符的新状态,但在第二种情况下,它应该 return 一个具有前一个音符的状态注意,加上新的。 我正在使用 Chai expect 库和 mocha。
如果有帮助,这是状态输出(它是控制台日志),我认为没问题,
{ 'id-123': { id: 'id-123', content: 'Hello World', timestamp: 1 } }
√ should return a new note
{ 'id-123': { id: 'id-123', content: 'Hello world', timestamp: 1 },
'id-456': { id: 'id-456', content: 'Bye bye world!', timestamp: 2 } }
1) should return two notes
这是我的减速器
import { merge } from 'ramda';
export const byId = (state={}, {type, payload}) => {
switch(type) {
case 'app/addNote':
console.log(merge(state, { [payload.id]: payload})) ;
return merge(state, { [payload.id]: payload});
default:
return state;
}
};
有什么想法吗?提前致谢!
您的expectedState
不正确。您正在比较 byId
切片的 "next state",但您的 expectedNextState
扩展了整个状态。它实际上应该是:
const expectedNextState = {
...state.byId,
'id-456': {
id: 'id-456',
content: 'Bye bye world!',
timestamp: 2
}
};