TypeError: Cannot assign to read only property 'x' of object '#<Object>' React/JEST

reactjs jestjs enzyme babel-jest
Pragam Shrivastava picture Pragam Shrivastava · Feb 20, 2018 · Viewed 24.4k times · Source

While I am writing test case for my react component I am getting

TypeError: Cannot assign to read only property 'x' of object '#'

wherein while the application run it does not throw similiar error

The code for it is pretty basic

this.props.defaultForm = true;

Why the behavior is different for test and actual application RUN?

What would be work around if I want to write a test case?

Answer

theVoogie picture theVoogie · Jul 17, 2018

There is a way to accomplish that, tho.
Create a "clone" of your object with Object.assign() method

let clone = Object.assign({}, this.props);

change its values and return it as a result.

clone.defaultForm = true;
return clone;

But take into account that Object.assign() creates a shallow copy of an object. Thus, if you need to have a deep copy, I would recommend to use following approach:

let deepClone = JSON.parse(JSON.stringify(this.props));
deepClone.defaultForm = true;
return deepClone;

Related questions

Simulate a button click in Jest

Simulating a button click seems like a very easy/standard operation. Yet, I can't get it to work in Jest.js tests. This is what I tried (and also doing it using jQuery), but it didn't seem to trigger anything: …

Read More
Jest spyOn function called

I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should …

Read More
How can I use Jest to spy on a method call?

I recently wanted to test that some custom method gets conditionally called in the componentDidMount method of a React component. componentDidMount() { if (this.props.initOpen) { this.methodName(); } } I'm using Jest as my testing framework, which includes jest.fn() for mocks/…

Read More