How to test componentDidUpdate()?

Question

This is an example implementation:

export class Person extends Component {
  componentDidMount() {
    const { onLoadProfile, onLoadPolicy, person } = this.props
    onLoadProfile(person.profile.uri)
    onLoadPolicy(person.policy.uri)
  }

  componentDidUpdate(prevProps) {
    const { onLoadProfile, onLoadPolicy, person } = this.props
    const prevPerson = prevProps.person.uri
    const curPerson = person.uri

    // If person has changed, update Person component
    if (prevPerson !== curPerson) {
      onLoadProfile(person.profile.uri)
      onLoadPolicy(person.policy.uri)
    }
  }
}

On componentDidMount(), I've managed to test it like this:

describe('<Person />', () => {
  let props
  let mountedPerson
  const mockLoadProfile = jest.fn()
  const mockLoadPolicy = jest.fn()

  const person = () => {
    if (!mountedPerson) {
      mountedPerson = mount(<Person {...props} />)
    } 
    return mountedPerson
  }

  beforeEach(() => {
    props = {
      onLoadProfile = mockLoadProfile,
      onLoadPolicy = mockLoadPolicy
    }
    mountedPerson = undefined
  })

  afterEach(() => {
    mockLoadProfile.mockClear()
    mockLoadPolicy.mockClear()
  })

  describe('componentDidMount', () => {
    it('loads profile', () => {
      person().instance().componentDidMount()
      expect(mockLoadProfile).toBeCalled()
    })

    it('loads policy', () => {
      person().instance().componentDidMount()
      expect(mockLoadPolicy).toBeCalled()
    })
  })
})

On componentDidUpdate(), I'd need the component to attempt to render() twice in order to verify if it updates when it should and vice-versa, yet I couldn't find a proper way to do it.

What is the correct approach to test a componentDidUpdate() method in React?

PS.: I'm using jest, enzyme and React 15.

score 43 · Accepted Answer · answered Dec 04 '18 at 11:55

43

I am using a different approach but you can copy the idea. You need to make a change in the props, I used the setProps() function:

describe('componentDidUpdate', () => {
    it('loads profile', () => { 
        const wrapper = shallow(<Person  {...props} />) as any;
        wrapper.setProps({ person: { uri: "something_different" } });
        expect(wrapper.instance().props.onLoadProfile).toBeCalled();
    })
})

I can see the pink in the coverage tests page is gone in the componentDidUpdate after running the test

answered Dec 04 '18 at 11:55

Bonomi

2,541
5
39
51

If you also happen to have the same call in `componentDidMount`, you could do something like `expect(wrapper.instance().props.onLoadProfile).toHaveBeenCalledTimes(2);` depending on how many props are changing how many times. – Ryan Walker Mar 25 '19 at 23:59
setProps has been deprecated – albanx Jul 19 '19 at 13:13
2

@albanx `setProps` deprecated long time ago in [React API](https://reactjs.org/blog/2015/10/07/react-v0.14.html#new-deprecations-introduced-with-a-warning). However `enzyme` method is [different one](https://github.com/airbnb/enzyme/issues/34#issuecomment-162344425). – savbace Aug 27 '19 at 11:14

Imran Ariffin · Answer 2 · 2019-10-22T01:45:16.453

The accepted answer is the simplest way to test the above case but you can also consider as a solution extracting the componentDidUpdate logic out of the component like the following:

// Component definition
export class Person extends Component {
  componentDidUpdate(prevProps) {
    this.props.handleComponentDidUpdate(prevProps, this.currentProps)
  }
  // Rest of component
}

// Component functions/handlers testing
describe('Person component props', () => {
  describe('handleComponentDidUpdate', () => {
    it('loads profile & policy if person changes', () => {
      const onLoadPolicy = jest.fn()
      const onLoadProfile = jest.fn()
      const prevProps = {
        person: { uri: 'some-person-uri-old' },
        policy: { uri: 'some-policy-uri' },
        profile: { uri: 'some-profile-uri' },
        onLoadPolicy,
        onLoadProfile
      }
      const props = {
        person: { uri: 'some-person-uri-new' }, // person uri changes
        policy: { uri: 'some-policy-uri' },
        profile: { uri: 'some-profile-uri' },
        onLoadPolicy,
        onLoadProfile
      }

      handleComponentDidUpdate(prevProps, props)

      expect(onLoadPolicy).toHaveBeenCalled()
      expect(onLoadProfile).toHaveBeenCalled()
    })
  })
})

This way the component can be as dumb as they can and app logic can be extracted out into functions/handlers that are more easily testable. This way you can focus your testing more on the function (which is easier to test) and less on the component (which is trickier to test).

As for using the Person component, you simply provide the required props including handleComponentDidUpdate.

If you still need to test the component you can do the following simple test (Note that in this test, unlike the functions/handlers test above, we don't care about the logic of the app like person, profile, policy etc):

// Component testing
describe('<Person/>', () => {
  it('should call handleComponentDidUpdate on prop change', () => {
    const handleComponentDidUpdate = jest.fn()
    const prevProps = {
      someProp: 'some-prop-prev',
      handleComponentDidUpdate
    }
    const newprops = {
      someProp: 'some-prop-new',
      handleComponentDidUpdate
    }

    const wrapper = shallow(<Person { ...prevProps } />)
    wrapper.setProps(newprops)

    expect(handleComponentDidUpdate).toHaveBeenCalledWith(prevProps, newProps)
  })
})

How to test componentDidUpdate()?

2 Answers2