How to test a prop update on React component

react testing-library
react-test-renderer
react testing-library update props
jest test props
react-test-renderer update props
jest test prop change
react testing-library examples
react-testing-library rerender not working

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(<MyComponent value={true} />);
        });

        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 <exports />. 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?

AirBnB's Enzyme library provides an 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(<Component {...props} />);

        expect(spy.calledOnce).to.equal(false);
        wrapper.setProps({ prop: 2 });
        expect(spy.calledOnce).to.equal(true);
    });

Reacting to Prop Changes in a React Component, When building a component using React there is often a requirement to to be called only when the text prop has been updated and will check� How to update a component’s prop in ReactJS — oh yes, it’s possible. If you have read the official React docs (and you should, as it is one great resource on React) you’d notice these lines: Whether you declare a component as a function or a class, it must never modify its own props. React is pretty flexible but it has a single strict rule:

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(<MyComponent 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
    ReactDOM.render(<MyComponent value={false} />, node);
    // Assert that `component` has updated its state in response to a prop change
    expect(component.state.value).toBe(false);
});

Update Props � Testing Library, is an example of how to update the props of a rendered component. import React from 'react' import { render } from '@testing-library/react'� Want to test a prop update on React component It provides a setProps method, that can be called on either a shallow or jsdom wrapper.

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.

Change props on same component instance � Issue #65 � testing , react-testing-library version: 2.3.0 node version: 9.9.0 yarn version: 1.5.1 No way to update props on same component instance like enzyme's� When building a component using React there is often a requirement to create a side effect when one of the component props changes. This could be a call to an API to fetch some data, manipulating the DOM, updating some component state, or any number of things.

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('<!doctype html><html><body><div id="test-div"></div></body></html>');
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(<MyComponent value={true} />, 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(<MyComponent value={false} />, node, function() {
        component = this;
        // Assert that `component` has updated its state in response to a prop change
        expect(component.state.value).toBe(false);
        done();
    });
});

Testing React Components with Jest and Enzyme- In Depth, Testing React components may be challenging for beginners and experienced If component has been changed, you need just update snapshot with Testing props: As a rule, I divide the testing of the props into two tests:� The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that. componentWillReceiveProps gives us an opportunity to update state by reacting to a prop transition before the render() call is made. shouldComponentUpdate allows us to set conditions on when we should update a component so that we are not rendering constantly

You can use enzyme to mount components and add props to it:

import React form 'react';
import component;
import {configure, mount} form 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {expect} from 'chai';

configure({adapter: new Adapter()});

describe('Testing component', () => {
  let wrapper;
  beforeEach(() => {
    component = mount(<MyComponent value={false} />);
  });
  it('should update the state of the component when the value prop is changed', function(){

    expect(component.props().children.props.value).toBe(false);
});

setProps(nextProps[, callback]) � Enzyme, state([key]) � tap(intercepter) � text() � type() � unmount() � update() A method that sets the props of the root component, and re-renders. Useful for when you are wanting to test how the component behaves over time with changing props. import React from 'react'; import PropTypes from 'prop-types'; function Foo({ name }� The data could have changed between the initial render and the two subsequent updates React has no way of knowing that the data didn’t change. Therefore, React needs to call componentWillReceiveProps, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).

Test Renderer – React, import TestRenderer from 'react-test-renderer'; function Link(props) { return <a testRenderer.update(element) This simulates a React update at the root. In this tutorial, we are going to learn about how to force update the react class-based components and also functional components. React generally re-renders the component whenever the component state or props are changed and we see the updated UI. Forcing component to re-render. React has a forceUpdate() method by using that we can force the

Testing React Components with react-test-renderer, and the Act API, Last updated: February 7, 2020 by Valentino Gagliardi- 20 minutes read Testing React components: getting to know snapshot testing "react"; import { create } from "react-test-renderer"; function Button(props) { return <button> Nothing to do� When a key changes, React will create a new component instance rather than update the current one. Keys are usually used for dynamic lists but are also useful here. 2. Use getDerivedStateFromProps / componentWillReceiveProps. If key doesn’t work for some reason (perhaps the component is very expensive to initialize)

Testing ⚛ components using render props, Let's look at how we can write tests for React components that use render props! Testing by shallow rendering React Function Components having state and lifecycle hooks using Jest testing library and enzyme by simulating events and testing for side-effects and prop updates.

Comments
  • In actual practice, the render is not called explicitly in all cases. A better way is to use state data change to trigger the re-render as there may be some other hooks in live environment which you are missing out on by directly calling state change.
  • If you're testing a response to props changes in something like componentWillReceiveProps or componentDidUpdate, etc., this is how I would do it as well. That said, I would try to rewrite the component so that the value in state is calculated dynamically at render-time instead, if possible (instead of using state).
  • +1 for the answer. Note that this is now ReactDOM.render instead of just React.render (as of version 0.14 I think).
  • Both TestUtils.renderIntoDocument and ReactDOM.render uses the returned value from ReactDOM.render. According to React docs: "using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases". Is there a better solution which avoids the use of ReactDOM.render output?
  • what if MyComponent is wrapped around a Provider ?