How to test a prop update on React component

Question

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

Here is my test fixture;

describe(\'updating the value\', function(){
                 


        

Answer 1

Here's a solution I've been using that uses ReactDOM.render but doesn't rely on the (deprecated) return value from the function. It uses the callback (3rd argument to ReactDOM.render) instead.

Setup jsdom if not testing in the browser:

var jsdom = require('jsdom').jsdom;
var document = jsdom('
');
global.document = document;
global.window = doc.defaultView;

Test using react-dom render with async callback:

var node, component;
beforeEach(function(done){
    node = document.getElementById('test-div')
    ReactDOM.render(, node, function() {
        component = this;
        done();
    });
});

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