Search code examples
reactjsjestjsenzymebabel-jest

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

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?

Solution

  • There is a way to accomplish that;

    Create a "clone" of your object with Object.assign() method, or JavaScript spread operator

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

    or

    let clone = { ...this.props };

    Then, change the values you need and return the clone as a result.

    let clone = Object.assign({}, this.props);
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;

    Here, "stringifying" the object and then parsing it back will create completely new deeply cloned copy of the object.