How to test a prop update on React component

How to test a prop update on React component

What is the correct way of unit testing a React component prop update.

Here is my test fixture;

describe('updating the value', function(){          var component;          beforeEach(function(){              component = TestUtils.renderIntoDocument();          });            it('should update the state of the component when the value prop is changed', function(){              // Act              component.props.value = false;              component.forceUpdate();              // Assert              expect(component.state.value).toBe(false);          });  });  

This works fine and the test passes, however this displays a react warning message

'Warning: Dont set .props.value of the React component . Instead specify the correct value when initially creating the element or use React.cloneElement to make a new element with updated props.'  

All i want to test is the update of a property, not to create a new instance of the element with a different property. Is there a better way to do this property update?

Answer by arkoak for How to test a prop update on React component

props are basically meant to be static values which are constant. That does not mean that properties will remain static and do not effect state indirectly

However SetState is preffered to be used for variable values that also impact the way how and when the component renders . The component itself does not re-render and thus does not update if prop is changed in normal conditions.

Instead you should use

this.setState({value: false});  

This will trigger all sub-actions including render as would a user-interaction would in a live environment.

Answer by Alexandre Kirszenberg for How to test a prop update on React component

If you re-render the element with different props in the same container node, it will be updated instead of re-mounted. See React.render.

In your case, you should use ReactDOM.render directly instead of TestUtils.renderIntoDocument. The later creates a new container node every time it is called, and thus a new component too.

var node, component;  beforeEach(function(){      node = document.createElement('div');      component = ReactDOM.render(, node);  });    it('should update the state of the component when the value prop is changed', function(){      // `component` will be updated instead of remounted      ReactDOM.render(, node);      // Assert that `component` has updated its state in response to a prop change      expect(component.state.value).toBe(false);  });  

Answer by David Gilbertson for How to test a prop update on React component

Caveat: this won't actually change props.

But for me, all I wanted was to test my logic in componentWillReceiveProps. So I'm calling myComponent.componentWillReceiveProps(/*new props*/) directly.

I didn't need/want to test that React calls the method when props change, or that React sets props when props change, just that some animation is triggered if the props differ to what was passed in.

Answer by user1095118 for How to test a prop update on React component

AirBnB's Enzyme library provides and elegant solution to this question.

it provides a setProps method, that can be called on either a shallow or jsdom wrapper.

    it("Component should call componentWillReceiveProps on update", () => {          const spy = sinon.spy(Component.prototype, "componentWillReceiveProps");          const wrapper = shallow();            expect(spy.calledOnce).to.equal(false);          wrapper.setProps({ prop: 2 });          expect(spy.calledOnce).to.equal(true);      });  

Answer by kidney for How to test a prop update on React component

This is an older question, but in case anyone else stumbles upon this, the following setup has worked for me nicely:

it('updates component on property update', () => {      let TestParent = React.createClass({          getInitialState() {              return {value: true};          },          render() {              return ;          }      });      component = TestUtils.renderIntoDocument();      component.setState({value: false});      // Verification code follows  });  

This makes React run the usual component update.

Answer by Yaniv Efraim for How to test a prop update on React component

Both TestUtils.renderIntoDocument and ReactDOM.render uses the returned value from ReactDOM.render. According to React docs:

ReactDOM.render() currently returns a reference to the root ReactComponent instance. However, using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root ReactComponent instance, the preferred solution is to attach a callback ref to the root element

What if we take this advise and do something like this:

let component, node;    const renderComponent = (props = {}) => {    ReactDOM.render( component = r} {...props} />, node);  }    beforeEach(function(){      node = document.createElement('div');      renderComponent({value: true}, node);   });    it('should update the state of the component when the value prop is changed', function(){      // `component` will be updated instead of remounted      renderComponent({value: false}, node);       // Assert that `component` has updated its state in response to a prop change      expect(component.state.value).toBe(false);  });  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72