`componentWillReceiveProps` is always invoked in `shallow`, even getDerivedStateFromProps exists

[MrFatt]

Description

As I tested, the componentWillReceiveProps will always be invoked when after calling shallowWrapper.setProps(), even though getDeriveStateFromProps exists. But referred to this, all the UNSAFE lifecycle methods should not be invoked when getDerivedStateFromProps exists.

By the way, componentWillUpdate and componentWillMount behaves correctly in shallow.
And, for mount, all the UNSAFE methods won't be invoked when component have getDerivedStateFromProps method

Code

import SomeComponent from '../SomeComponent';
import Enzyme, { render, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';

describe("enzyme tests life cycles", () => {
  Enzyme.configure({adapter: new Adapter()});

  let renderSpy, getDerivedStateFromPropsSpy, componentDidMountSpy,
    shouldComponentUpdateSpy, componentDidUpdateSpy, componentWillUnmountSpy, componentWillMountSpy,
    componentWillUpdateSpy, componentWillReceivePropsSpy;
  beforeEach(() => {
    renderSpy = jest.spyOn(SomeComponent.prototype, 'render');
    getDerivedStateFromPropsSpy = jest.spyOn(SomeComponent, 'getDerivedStateFromProps');
    componentDidMountSpy = jest.spyOn(SomeComponent.prototype, 'componentDidMount');
    shouldComponentUpdateSpy = jest.spyOn(SomeComponent.prototype, 'shouldComponentUpdate');
    componentDidUpdateSpy = jest.spyOn(SomeComponent.prototype, 'componentDidUpdate');
    componentWillUnmountSpy = jest.spyOn(SomeComponent.prototype, 'componentWillUnmount');
    componentWillMountSpy = jest.spyOn(SomeComponent.prototype, 'componentWillMount');
    componentWillUpdateSpy = jest.spyOn(SomeComponent.prototype, 'componentWillUpdate');
    componentWillReceivePropsSpy = jest.spyOn(SomeComponent.prototype, 'componentWillReceiveProps');
  });
  afterEach(() => {
    jest.clearAllMocks();
  });


  it('shallow called hooks', async () => {
    const wrapper = shallow(<SomeComponent/>);
    expect(renderSpy).toHaveBeenCalledTimes(1);
    expect(getDerivedStateFromPropsSpy).toHaveBeenCalledTimes(1);
    expect(componentWillMountSpy).not.toHaveBeenCalled();
    expect(componentDidMountSpy).toHaveBeenCalledTimes(1);
    expect(shouldComponentUpdateSpy).not.toHaveBeenCalled();
    expect(componentDidUpdateSpy).not.toHaveBeenCalled();
    expect(componentWillUnmountSpy).not.toHaveBeenCalled();

    await wrapper.setProps({a: 1});
    expect(getDerivedStateFromPropsSpy).toHaveBeenCalledTimes(2);
    expect(componentWillReceivePropsSpy).not.toHaveBeenCalled();
    expect(shouldComponentUpdateSpy).toHaveBeenCalledTimes(1);
    expect(componentWillUpdateSpy).not.toHaveBeenCalled();
    expect(componentDidUpdateSpy).toHaveBeenCalledTimes(1);
    expect(componentWillUnmountSpy).not.toHaveBeenCalled();

  });
});

I am expecting the tests to pass, but the result shows that


expect(componentWillReceivePropsSpy).not.toHaveBeenCalled(); failed.

Your environment

API

• shallow
• mount
• render

Version

Tool	Easea
React	16.4.1
jest	20.0.4
Enzyme	3.3.0
enzyme-adapter-react-16	1.1.1

[koba04]

@MrFatt You are right. Because enzyme calls componentWillReceiveProps directly in order to call all lifecycle methods correctly with shallow.
I think this will be fixed by #1192.

[ljharb]

Closing, since #1192 is merged.