[React Native] componentDidUpdate not called after getDerivedStateFromProps

[lucianomlima]

Current behavior

componentDidUpdate it's not called after wrapper.setProps() and getDerivedStateFromProps.
May be related to #2020

Code

const MIN_VALUE = 5;

export default class MyComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      animatedOpacity: new Animated.Value(0),
      animatedTop: new Animated.Value(2),
      isHidden: true,
      isEnabled: true,
      shouldAnimate: false,
    };
  }

  static getDerivedStateFromProps(props: Props, state: State) {
    const { counters } = props;
    const { isHidden } = state;

    if (counters && counters.newOpportunities >= MIN_VALUE && isHidden) {
      return { isHidden: false, shouldAnimate: true };
    } else if (counters && counters.newOpportunities === 0 && !isHidden) {
      return { shouldAnimate: false };
    }

    return null;
  }

  componentDidUpdate(prevProps: Props, prevState: State) {
    const { shouldAnimate } = this.state;

    if (prevState.shouldAnimate !== shouldAnimate) {
      this.animate(shouldAnimate, () => {
        if (!shouldAnimate) {
          this.setState({ isHidden: true, isEnabled: true });
        }
      });
    }
  }

  onPress = () => {
    this.setState({ isEnabled: false });
    this.props.refetchList();
  };

  animate = (show: boolean, completion?: () => void) => {
    Animated.parallel([
      Animated.timing(this.state.animatedTop, {
        toValue: show ? 8 : 0,
        duration: 200,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.animatedOpacity, {
        toValue: show ? 100 : 0,
        duration: 400,
        useNativeDriver: true,
      }),
    ]).start(() => {
      if (completion) {
        completion();
      }
    });
  };

  render() {
    const { animatedOpacity, animatedTop, isHidden, isEnabled } = this.state;
    const animatedStyle = {
      opacity: animatedOpacity,
      transform: [{ translateY: animatedTop }],
    };
    return (
      <If condition={!isHidden}>
        <Animated.View style={[styles.container, animatedStyle]}>
          <FloatingButton
            iconLeft
            transparent
            rounded
            primary
            disabled={!isEnabled}
            onPress={this.onPress}
            style={styles.button}
          >
            <Text style={styles.text}>Check news!</Text>
          </FloatingButton>
        </Animated.View>
      </If>
    );
  }
}

Test

This don't work because Animated.timing.mock.calls is equal to [];

      const wrapper = shallow(<MyComponent />, { disableLifecyclesMethod: false });
      wrapper.setProps({ counters: { newOpportunities: 5 } });

      const [
        [downAnimation, downConfig],
        [fadeInAnimation, fadeInConfig],
      ] = Animated.timing.mock.calls; //
      expect(downAnimation._value).toEqual(2);
      expect(downConfig).toEqual({
        toValue: 8,
        duration: 200,
        useNativeDriver: true,
      });
      expect(fadeInAnimation._value).toEqual(0);
      expect(fadeInConfig).toEqual({
        toValue: 100,
        duration: 400,
        useNativeDriver: true,
      });

This works but it's very ugly

      const wrapper = shallow(<MyComponent />, { disableLifecyclesMethod: false });
      let state = wrapper.state(); // Get current state

      wrapper.setProps({ counters: { newOpportunities: 5 } });
      wrapper.instance().componentDidUpdate({}, state); // Call componentDidUpdate manually

      const [
        [downAnimation, downConfig],
        [fadeInAnimation, fadeInConfig],
      ] = Animated.timing.mock.calls;
      expect(downAnimation._value).toEqual(2);
      expect(downConfig).toEqual({
        toValue: 8,
        duration: 200,
        useNativeDriver: true,
      });
      expect(fadeInAnimation._value).toEqual(0);
      expect(fadeInConfig).toEqual({
        toValue: 100,
        duration: 400,
        useNativeDriver: true,
      });

Expected behaviour

Works properly.

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.9.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.8.6
adapter (below)	1.13.1
enzyme-to-json	3.3.5

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )