unit testing - How to test a prop update on React component -


what correct way of unit testing react component prop update.

here test fixture;

describe('updating value', function(){         var component;         beforeeach(function(){             component = testutils.renderintodocument(<mycomponent value={true} />);         });          it('should update state of component when value prop changed', function(){             // act             component.props.value = false;             component.forceupdate();             // assert             expect(component.state.value).tobe(false);         }); }); 

this works fine , test passes, displays react warning message

'warning: dont set .props.value of react component <exports />. instead specify correct value when creating element or use react.cloneelement make new element updated props.' 

all want test update of property, not create new instance of element different property. there better way property update?

if re-render element different props in same container node, updated instead of re-mounted. see react.render.

in case, should use reactdom.render directly instead of testutils.renderintodocument. later creates new container node every time called, , new component too.

var node, component; beforeeach(function(){     node = document.createelement('div');     component = reactdom.render(<mycomponent value={true} />, node); });  it('should update state of component when value prop changed', function(){     // `component` updated instead of remounted     reactdom.render(<mycomponent value={false} />, node);     // assert `component` has updated state in response prop change     expect(component.state.value).tobe(false); }); 

Comments