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

Created on 7 Feb 2020  ·  9Comments  ·  Source: facebook/jest

🐛 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 [email protected]:dpinol/jest-react-toEqual-bug.git
cd jest-react-toEqual-bug
npm i -D
npm run test

envinfo


Bug Report Needs Repro Needs Triage

Most helpful comment

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.

All 9 comments

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

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.

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:

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

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.

Was this page helpful?
0 / 5 - 0 ratings