Redux testing issue with Chai - testing

Question

I'm learning react redux, I'm currently implementing some reducers using TDD. I'm working with a sample application, it's just a notepad for adding/removing/opening/closing notes.
I'm making some tests for adding a new note, but the second "it" is failing, the error that throws me is the following:
1) AddNote reducer should return two notes:
AssertionError: expected { Object (id-123, id-456) } to equal { 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);
});
});
I'm using also a helper, here it is
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',
}),
};
The idea is if I add a note in the first case it would return a new state with just that note, but in the second case, it should return a state with the previous note, plus the new one.
I'm using Chai expect library with mocha.
If it helps here's the output of the state (it's a console log), which I think is ok,
{ '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
Here's is my reducer
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;
}
};
Any ideas? thanks in advance!

Answer 1

Your expectedState is not correct. You are comparing the "next state" of byId slice, but your expectedNextState extends the whole state. It should actually be:
const expectedNextState = {
...state.byId,
'id-456': {
id: 'id-456',
content: 'Bye bye world!',
timestamp: 2
}
};