Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dpinol opened this issue Feb 7, 2020 · 10 comments · Fixed by #9575
Closed

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

dpinol opened this issue Feb 7, 2020 · 10 comments · Fixed by #9575

Comments

@dpinol
Copy link

dpinol commented Feb 7, 2020

🐛 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


@SimenB
Copy link
Member

SimenB commented Feb 7, 2020

/cc @pedrottimark

dpinol added a commit to hubtype/botonic that referenced this issue Feb 10, 2020
dpinol added a commit to hubtype/botonic that referenced this issue Feb 10, 2020
@wvanvugt-speedline
Copy link

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.

dpinol added a commit to hubtype/botonic that referenced this issue Feb 18, 2020
dpinol added a commit to hubtype/botonic that referenced this issue Feb 18, 2020
@tanettrimas
Copy link

tanettrimas commented Mar 13, 2020

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?

Skjermbilde 2020-03-13 kl  19 33 37

// 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.

@0rvar
Copy link

0rvar commented Mar 24, 2020

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.

@0rvar
Copy link

0rvar commented Mar 24, 2020

I have created a minimal reproducing test case:

Run on Repl.it

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

@gaui
Copy link

gaui commented Mar 24, 2020

Also having this problem. Until it's properly fixed this solves it. reduxjs/redux-toolkit#424 (comment)

@Lexicality
Copy link

It looks like there's a fix in master but it's not been released yet.

@SimenB
Copy link
Member

SimenB commented Mar 25, 2020

25.2.0 published

@gaearon
Copy link
Contributor

gaearon commented Apr 2, 2020

This isn't a sufficient fix. I filed #9745.

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 11, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants