Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot assign to read only property 'props' of object '#<Object>' with React

See original GitHub issue

🐛 Bug Report

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.

To Reproduce

  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)

Expected behavior

It works fine in jest 24.9

    expect(received).toEqual(expected) // deep equality

    - Expected
    + Received

    - <div />
    + <div
    +   prop1=""
    + />

Link to repl or repo (highly encouraged)

git clone git@github.com:dpinol/jest-react-toEqual-bug.git
cd jest-react-toEqual-bug
npm i -D
npm run test

envinfo

Issue Analytics

State:
Created 4 years ago
Reactions:9
Comments:10 (1 by maintainers)

Top GitHub Comments

4reactions

wvanvugt-speedlinecommented, Feb 12, 2020

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.

3reactions

gaearoncommented, Apr 2, 2020

This isn’t a sufficient fix. I filed https://github.com/facebook/jest/issues/9745.

Top Results From Across the Web

Cannot assign to read only property 'props' of #<Object> in ...

You cannot push to props this.props.nav.push({id: 'Applist', index: 2}); since component properties are read-only, as the error states.

TypeError: Cannot assign to read only property of ... - GitHub

The issue arises when you are passing in an immutable object as your default values. In my case I was directly passing in...

Cannot assign to read only property of Object in JavaScript

The error "Cannot assign to read only property of object" occurs when we try to change a property of an object that has...

Cannot assign to read only property 'props' of #<Object> in ...

[Solved]-Cannot assign to read only property 'props' of #<Object> in react native-Reactjs ... You cannot push to props this.props.nav.push({id: 'Applist', index: ...

Fix useRef() “Cannot Assign to … Read Only Property" Error

Now, as you can see from the example above, the type of the reference object is a mutable object (i.e. React.MutableRefObject ) which...