After upgrading to jest 25.x.x, when comparing 2 different React Components with
expect(<...>).toEqual(<...>)
there's an TypeError instead of a report of the differences between the components.
expect(<div prop1="" />).toEqual(<div/>)
TypeError: Cannot assign to read only property 'props' of object '#<Object>'
3 | test('renders learn react link', () => {
4 | expect(<div/>).toEqual(<div/>)
> 5 | expect(<div prop1="" />).toEqual(<div/>)
| ^
6 | });
7 |
at Object.<anonymous> (src/App.test.js:5:28)
It works fine in jest 24.9
expect(received).toEqual(expected) // deep equality
- Expected
+ Received
- <div />
+ <div
+ prop1=""
+ />
git clone [email protected]:dpinol/jest-react-toEqual-bug.git
cd jest-react-toEqual-bug
npm i -D
npm run test
/cc @pedrottimark
I am running into this problem as well. It seems quite easy to reproduce:
const x = { foo: {} };
Object.freeze(x);
expect({ foo: { bar: 1 } }).toEqual(x);
The expect statement produces the error TypeError: Cannot assign to read only property 'foo' of object '#<Object>'.
This issue occurs on Jest >= 25.0.0.
I am also running into this bug where I have a frozen object, and comparing it against one that I want it to be equal to, using the toEqual matcher. Is it actually fixed?

// createItem.test.js
const createItem = require('./createItem')
describe('createItem', () => {
it('returns a valid menu item', () => {
const actual = createItem({
allergies: ['MU', 'F'],
category: 'sushi',
price: 159,
title: 'my test item'
})
expect(actual).toBe({
title: 'my test item',
price: 159,
category: 'sushi',
allergies: [
{
code: 'MU',
nameNO: 'sennep',
nameEN: 'mustard'
},
{
code: 'F',
nameNO: 'fisk',
nameEN: 'fish'
}
]
})
})
})
// createItem.js
const createItem = ({
title,
category,
price,
allergies
} = {}) => {
if(!title || typeof title !== 'string') {
throw new Error('Invalid or not existing property')
}
if(!allergies || !allergies.length) {
throw new Error('Invalid or not existing property')
}
if(!price || typeof price !== 'number') {
throw new Error('Invalid or not existing property')
}
if(!category || typeof category !== 'string') {
throw new Error('Invalid or not existing property')
}
return Object.freeze({
title,
category,
price,
allergies
})
}
module.exports = createItem
UPDATE: If I rename the allergies-variable I have to something else, it works properly. I do not understand this at all.
Getting this issue too. Downgrading to jest 24.x reveals a normal .isEqual failure, but with 25.x we get TypeError: Cannot assign to read only property 'x' of object '#<Object>'.
Objects are frozen.
I have created a minimal reproducing test case:
test('frozen object comparison', () => {
expect(Object.freeze({
a: {},
b: {},
})).toEqual({
a: {},
});
});
Error:
FAIL ./frozen-comparison.test.js
✕ frozen object comparison (10ms)
● frozen object comparison
TypeError: Cannot assign to read only property 'a' of object '#<Object>'
3 | a: {},
4 | b: {},
> 5 | })).toEqual({
| ^
6 | a: {},
7 | });
8 | });
at Object.<anonymous>.test (frozen-comparison.test.js:5:7)
@SimenB
Also having this problem. Until it's properly fixed this solves it. https://github.com/reduxjs/redux-toolkit/issues/424#issuecomment-597508298
It looks like there's a fix in master but it's not been released yet.
25.2.0 published
This isn't a sufficient fix. I filed https://github.com/facebook/jest/issues/9745.
Most helpful comment
I am running into this problem as well. It seems quite easy to reproduce:
The expect statement produces the error
TypeError: Cannot assign to read only property 'foo' of object '#<Object>'.This issue occurs on Jest >=
25.0.0.