How to use callComponentWillReceiveProps method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberClassComponent.new.js

Source:ReactFiberClassComponent.new.js

...213  if (oldState !== instance.state) {214    classComponentUpdater.enqueueReplaceState(instance, instance.state, null);215  }216}217function callComponentWillReceiveProps(218  workInProgress,219  instance,220  newProps,221  nextContext,222) {223  const oldState = instance.state;224  if (typeof instance.componentWillReceiveProps === 'function') {225    instance.componentWillReceiveProps(newProps, nextContext);226  }227  if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {228    instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);229  }230  if (instance.state !== oldState) {231    classComponentUpdater.enqueueReplaceState(instance, instance.state, null);232  }233}234// Invokes the mount life-cycles on a previously never rendered instance.235function mountClassInstance(236  workInProgress: Fiber,237  ctor: any,238  newProps: any,239  renderLanes: Lanes,240): void {241  const instance = workInProgress.stateNode;242  instance.props = newProps;243  instance.state = workInProgress.memoizedState;244  instance.refs = emptyRefsObject;245  initializeUpdateQueue(workInProgress);246  const contextType = ctor.contextType;247  if (typeof contextType === 'object' && contextType !== null) {248    instance.context = readContext(contextType);249  } else {250    const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);251    instance.context = getMaskedContext(workInProgress, unmaskedContext);252  }253  processUpdateQueue(workInProgress, newProps, instance, renderLanes);254  instance.state = workInProgress.memoizedState;255  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;256  if (typeof getDerivedStateFromProps === 'function') {257    applyDerivedStateFromProps(258      workInProgress,259      ctor,260      getDerivedStateFromProps,261      newProps,262    );263    instance.state = workInProgress.memoizedState;264  }265  // In order to support react-lifecycles-compat polyfilled components,266  // Unsafe lifecycles should not be invoked for components using the new APIs.267  if (268    typeof ctor.getDerivedStateFromProps !== 'function' &&269    typeof instance.getSnapshotBeforeUpdate !== 'function' &&270    (typeof instance.UNSAFE_componentWillMount === 'function' ||271      typeof instance.componentWillMount === 'function')272  ) {273    callComponentWillMount(workInProgress, instance);274    // If we had additional state updates during this life-cycle, let's275    // process them now.276    processUpdateQueue(workInProgress, newProps, instance, renderLanes);277    instance.state = workInProgress.memoizedState;278  }279  if (typeof instance.componentDidMount === 'function') {280      workInProgress.flags |= Update;281  }282}283function resumeMountClassInstance(284  workInProgress: Fiber,285  ctor: any,286  newProps: any,287  renderLanes: Lanes,288): boolean {289  const instance = workInProgress.stateNode;290  const oldProps = workInProgress.memoizedProps;291  instance.props = oldProps;292  const oldContext = instance.context;293  const contextType = ctor.contextType;294  let nextContext = emptyContextObject;295  if (typeof contextType === 'object' && contextType !== null) {296    nextContext = readContext(contextType);297  } else  {298    const nextLegacyUnmaskedContext = getUnmaskedContext(299      workInProgress,300      ctor,301      true,302    );303    nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);304  }305  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;306  const hasNewLifecycles =307    typeof getDerivedStateFromProps === 'function' ||308    typeof instance.getSnapshotBeforeUpdate === 'function';309  // Note: During these life-cycles, instance.props/instance.state are what310  // ever the previously attempted to render - not the "current". However,311  // during componentDidUpdate we pass the "current" props.312  // In order to support react-lifecycles-compat polyfilled components,313  // Unsafe lifecycles should not be invoked for components using the new APIs.314  if (315    !hasNewLifecycles &&316    (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||317      typeof instance.componentWillReceiveProps === 'function')318  ) {319    if (oldProps !== newProps || oldContext !== nextContext) {320      callComponentWillReceiveProps(321        workInProgress,322        instance,323        newProps,324        nextContext,325      );326    }327  }328  resetHasForceUpdateBeforeProcessing();329  const oldState = workInProgress.memoizedState;330  let newState = (instance.state = oldState);331  processUpdateQueue(workInProgress, newProps, instance, renderLanes);332  newState = workInProgress.memoizedState;333  if (334    oldProps === newProps &&335    oldState === newState &&336    !hasContextChanged() &&337    !checkHasForceUpdateAfterProcessing()338  ) {339    // If an update was already in progress, we should schedule an Update340    // effect even though we're bailing out, so that cWU/cDU are called.341    if (typeof instance.componentDidMount === 'function') {342        workInProgress.flags |= Update;343    }344    return false;345  }346  if (typeof getDerivedStateFromProps === 'function') {347    applyDerivedStateFromProps(348      workInProgress,349      ctor,350      getDerivedStateFromProps,351      newProps,352    );353    newState = workInProgress.memoizedState;354  }355  const shouldUpdate =356    // checkHasForceUpdateAfterProcessingï¼æ¬æ¬¡æ´æ°çUpdateä¸åå¨tagä¸ºForceUpdateï¼åè¿åtrue357    checkHasForceUpdateAfterProcessing() ||358    checkShouldComponentUpdate(359      workInProgress,360      ctor,361      oldProps,362      newProps,363      oldState,364      newState,365      nextContext,366    );367  if (shouldUpdate) {368    // In order to support react-lifecycles-compat polyfilled components,369    // Unsafe lifecycles should not be invoked for components using the new APIs.370    if (371      !hasNewLifecycles &&372      (typeof instance.UNSAFE_componentWillMount === 'function' ||373        typeof instance.componentWillMount === 'function')374    ) {375      if (typeof instance.componentWillMount === 'function') {376        instance.componentWillMount();377      }378      if (typeof instance.UNSAFE_componentWillMount === 'function') {379        instance.UNSAFE_componentWillMount();380      }381    }382    if (typeof instance.componentDidMount === 'function') {383        workInProgress.flags |= Update;384    }385  } else {386    // If an update was already in progress, we should schedule an Update387    // effect even though we're bailing out, so that cWU/cDU are called.388    if (typeof instance.componentDidMount === 'function') {389        workInProgress.flags |= Update;390    }391    // If shouldComponentUpdate returned false, we should still update the392    // memoized state to indicate that this work can be reused.393    workInProgress.memoizedProps = newProps;394    workInProgress.memoizedState = newState;395  }396  // Update the existing instance's state, props, and context pointers even397  // if shouldComponentUpdate returns false.398  instance.props = newProps;399  instance.state = newState;400  instance.context = nextContext;401  return shouldUpdate;402}403// Invokes the update life-cycles and returns false if it shouldn't rerender.404function updateClassInstance(405  current: Fiber,406  workInProgress: Fiber,407  ctor: any,408  newProps: any,409  renderLanes: Lanes,410): boolean {411  const instance = workInProgress.stateNode;412  cloneUpdateQueue(current, workInProgress);413  const unresolvedOldProps = workInProgress.memoizedProps;414  const oldProps =415    workInProgress.type === workInProgress.elementType416      ? unresolvedOldProps417      : resolveDefaultProps(workInProgress.type, unresolvedOldProps);418  instance.props = oldProps;419  const unresolvedNewProps = workInProgress.pendingProps;420  const oldContext = instance.context;421  const contextType = ctor.contextType;422  let nextContext = emptyContextObject;423  if (typeof contextType === 'object' && contextType !== null) {424    nextContext = readContext(contextType);425  } else  {426    const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);427    nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);428  }429  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;430  const hasNewLifecycles =431    typeof getDerivedStateFromProps === 'function' ||432    typeof instance.getSnapshotBeforeUpdate === 'function';433  // Note: During these life-cycles, instance.props/instance.state are what434  // ever the previously attempted to render - not the "current". However,435  // during componentDidUpdate we pass the "current" props.436  // In order to support react-lifecycles-compat polyfilled components,437  // Unsafe lifecycles should not be invoked for components using the new APIs.438  if (439    !hasNewLifecycles &&440    (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||441      typeof instance.componentWillReceiveProps === 'function')442  ) {443    // unresolvedOldPropsä¸ºç»ä»¶ä¸æ¬¡æ´æ°æ¶çpropsï¼444    // èunresolvedNewPropsåæ¥èªClassComponentè°ç¨this.renderè¿åçJSXä¸çpropsåæ°ã445    // å¯è§ä»ä»¬çå¼ç¨æ¯ä¸åçãæä»¥ä»ä»¬å¨çæ¯è¾ä¸ºfalse446    if (447      unresolvedOldProps !== unresolvedNewProps ||448      oldContext !== nextContext449    ) {450      // ä¼è°ç¨componentWillRecieveProps451      callComponentWillReceiveProps(452        workInProgress,453        instance,454        newProps,455        nextContext,456      );457    }458  }459  resetHasForceUpdateBeforeProcessing();460  const oldState = workInProgress.memoizedState;461  let newState = (instance.state = oldState);462  processUpdateQueue(workInProgress, newProps, instance, renderLanes);463  newState = workInProgress.memoizedState;464  if (465    unresolvedOldProps === unresolvedNewProps &&...

ReactFiberClassComponent.old.js

Source:ReactFiberClassComponent.old.js

...200  if (oldState !== instance.state) {201    classComponentUpdater.enqueueReplaceState(instance, instance.state, null);202  }203}204function callComponentWillReceiveProps(205  workInProgress,206  instance,207  newProps,208  nextContext,209) {210  const oldState = instance.state;211  if (typeof instance.componentWillReceiveProps === 'function') {212    instance.componentWillReceiveProps(newProps, nextContext);213  }214  if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {215    instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);216  }217  if (instance.state !== oldState) {218    classComponentUpdater.enqueueReplaceState(instance, instance.state, null);219  }220}221// Invokes the mount life-cycles on a previously never rendered instance.222function mountClassInstance(223  workInProgress: Fiber,224  ctor: any,225  newProps: any,226  renderLanes: Lanes,227): void {228  const instance = workInProgress.stateNode;229  instance.props = newProps;230  instance.state = workInProgress.memoizedState;231  instance.refs = emptyRefsObject;232  initializeUpdateQueue(workInProgress);233  const contextType = ctor.contextType;234  if (typeof contextType === 'object' && contextType !== null) {235    instance.context = readContext(contextType);236  } else if (disableLegacyContext) {237    instance.context = emptyContextObject;238  } else {239    const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);240    instance.context = getMaskedContext(workInProgress, unmaskedContext);241  }242  processUpdateQueue(workInProgress, newProps, instance, renderLanes);243  instance.state = workInProgress.memoizedState;244  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;245  if (typeof getDerivedStateFromProps === 'function') {246    applyDerivedStateFromProps(247      workInProgress,248      ctor,249      getDerivedStateFromProps,250      newProps,251    );252    instance.state = workInProgress.memoizedState;253  }254  // In order to support react-lifecycles-compat polyfilled components,255  // Unsafe lifecycles should not be invoked for components using the new APIs.256  if (257    typeof ctor.getDerivedStateFromProps !== 'function' &&258    typeof instance.getSnapshotBeforeUpdate !== 'function' &&259    (typeof instance.UNSAFE_componentWillMount === 'function' ||260      typeof instance.componentWillMount === 'function')261  ) {262    callComponentWillMount(workInProgress, instance);263    // If we had additional state updates during this life-cycle, let's264    // process them now.265    processUpdateQueue(workInProgress, newProps, instance, renderLanes);266    instance.state = workInProgress.memoizedState;267  }268  if (typeof instance.componentDidMount === 'function') {269    workInProgress.flags |= Update;270  }271}272function resumeMountClassInstance(273  workInProgress: Fiber,274  ctor: any,275  newProps: any,276  renderLanes: Lanes,277): boolean {278  const instance = workInProgress.stateNode;279  const oldProps = workInProgress.memoizedProps;280  instance.props = oldProps;281  const oldContext = instance.context;282  const contextType = ctor.contextType;283  let nextContext = emptyContextObject;284  if (typeof contextType === 'object' && contextType !== null) {285    nextContext = readContext(contextType);286  } else if (!disableLegacyContext) {287    const nextLegacyUnmaskedContext = getUnmaskedContext(288      workInProgress,289      ctor,290      true,291    );292    nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);293  }294  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;295  const hasNewLifecycles =296    typeof getDerivedStateFromProps === 'function' ||297    typeof instance.getSnapshotBeforeUpdate === 'function';298  // Note: During these life-cycles, instance.props/instance.state are what299  // ever the previously attempted to render - not the "current". However,300  // during componentDidUpdate we pass the "current" props.301  // In order to support react-lifecycles-compat polyfilled components,302  // Unsafe lifecycles should not be invoked for components using the new APIs.303  if (304    !hasNewLifecycles &&305    (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||306      typeof instance.componentWillReceiveProps === 'function')307  ) {308    if (oldProps !== newProps || oldContext !== nextContext) {309      callComponentWillReceiveProps(310        workInProgress,311        instance,312        newProps,313        nextContext,314      );315    }316  }317  resetHasForceUpdateBeforeProcessing();318  const oldState = workInProgress.memoizedState;319  let newState = (instance.state = oldState);320  processUpdateQueue(workInProgress, newProps, instance, renderLanes);321  newState = workInProgress.memoizedState;322  if (323    oldProps === newProps &&324    oldState === newState &&325    !hasContextChanged() &&326    !checkHasForceUpdateAfterProcessing()327  ) {328    // If an update was already in progress, we should schedule an Update329    // effect even though we're bailing out, so that cWU/cDU are called.330    if (typeof instance.componentDidMount === 'function') {331      workInProgress.flags |= Update;332    }333    return false;334  }335  if (typeof getDerivedStateFromProps === 'function') {336    applyDerivedStateFromProps(337      workInProgress,338      ctor,339      getDerivedStateFromProps,340      newProps,341    );342    newState = workInProgress.memoizedState;343  }344  const shouldUpdate =345    checkHasForceUpdateAfterProcessing() ||346    checkShouldComponentUpdate(347      workInProgress,348      ctor,349      oldProps,350      newProps,351      oldState,352      newState,353      nextContext,354    );355  if (shouldUpdate) {356    // In order to support react-lifecycles-compat polyfilled components,357    // Unsafe lifecycles should not be invoked for components using the new APIs.358    if (359      !hasNewLifecycles &&360      (typeof instance.UNSAFE_componentWillMount === 'function' ||361        typeof instance.componentWillMount === 'function')362    ) {363      if (typeof instance.componentWillMount === 'function') {364        instance.componentWillMount();365      }366      if (typeof instance.UNSAFE_componentWillMount === 'function') {367        instance.UNSAFE_componentWillMount();368      }369    }370    if (typeof instance.componentDidMount === 'function') {371      workInProgress.flags |= Update;372    }373  } else {374    // If an update was already in progress, we should schedule an Update375    // effect even though we're bailing out, so that cWU/cDU are called.376    if (typeof instance.componentDidMount === 'function') {377      workInProgress.flags |= Update;378    }379    // If shouldComponentUpdate returned false, we should still update the380    // memoized state to indicate that this work can be reused.381    workInProgress.memoizedProps = newProps;382    workInProgress.memoizedState = newState;383  }384  // Update the existing instance's state, props, and context pointers even385  // if shouldComponentUpdate returns false.386  instance.props = newProps;387  instance.state = newState;388  instance.context = nextContext;389  return shouldUpdate;390}391// Invokes the update life-cycles and returns false if it shouldn't rerender.392function updateClassInstance(393  current: Fiber,394  workInProgress: Fiber,395  ctor: any,396  newProps: any,397  renderLanes: Lanes,398): boolean {399  const instance = workInProgress.stateNode;400  cloneUpdateQueue(current, workInProgress);401  const unresolvedOldProps = workInProgress.memoizedProps;402  const oldProps =403    workInProgress.type === workInProgress.elementType404      ? unresolvedOldProps405      : resolveDefaultProps(workInProgress.type, unresolvedOldProps);406  instance.props = oldProps;407  const unresolvedNewProps = workInProgress.pendingProps;408  const oldContext = instance.context;409  const contextType = ctor.contextType;410  let nextContext = emptyContextObject;411  if (typeof contextType === 'object' && contextType !== null) {412    nextContext = readContext(contextType);413  } else if (!disableLegacyContext) {414    const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);415    nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);416  }417  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;418  const hasNewLifecycles =419    typeof getDerivedStateFromProps === 'function' ||420    typeof instance.getSnapshotBeforeUpdate === 'function';421  // Note: During these life-cycles, instance.props/instance.state are what422  // ever the previously attempted to render - not the "current". However,423  // during componentDidUpdate we pass the "current" props.424  // In order to support react-lifecycles-compat polyfilled components,425  // Unsafe lifecycles should not be invoked for components using the new APIs.426  if (427    !hasNewLifecycles &&428    (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||429      typeof instance.componentWillReceiveProps === 'function')430  ) {431    if (432      unresolvedOldProps !== unresolvedNewProps ||433      oldContext !== nextContext434    ) {435      callComponentWillReceiveProps(436        workInProgress,437        instance,438        newProps,439        nextContext,440      );441    }442  }443  resetHasForceUpdateBeforeProcessing();444  const oldState = workInProgress.memoizedState;445  let newState = (instance.state = oldState);446  processUpdateQueue(workInProgress, newProps, instance, renderLanes);447  newState = workInProgress.memoizedState;448  if (449    unresolvedOldProps === unresolvedNewProps &&...

ReactFiberClassComponent.js

Source:ReactFiberClassComponent.js

...94    if (oldState !== instance.state) {95      updater.enqueueReplaceState(instance, instance.state, null);96    }97  }98  function callComponentWillReceiveProps(workInProgress, instance, newProps, newContext) {99    const oldState = instance.state;100    instance.componentWillReceiveProps(newProps, newContext);101    if (instance.state !== oldState) {102      updater.enqueueReplaceState(instance, instance.state, null);103    }104  }105  // Invokes the mount life-cycles on a previously never rendered instance.106  // Called on a preexisting class instance. Returns false if a resumed render107  // could be reused.108  // function resumeMountClassInstance(109  //   workInProgress: Fiber,110  //   priorityLevel: PriorityLevel,111  // ): boolean {112  //   const instance = workInProgress.stateNode;113  //   resetInputPointers(workInProgress, instance);114  //   let newState = workInProgress.memoizedState;115  //   let newProps = workInProgress.pendingProps;116  //   if (!newProps) {117  //     // If there isn't any new props, then we'll reuse the memoized props.118  //     // This could be from already completed work.119  //     newProps = workInProgress.memoizedProps;120  //     invariant(121  //       newProps != null,122  //       'There should always be pending or memoized props. This error is ' +123  //         'likely caused by a bug in React. Please file an issue.',124  //     );125  //   }126  //   const newUnmaskedContext = getUnmaskedContext(workInProgress);127  //   const newContext = getMaskedContext(workInProgress, newUnmaskedContext);128  //   const oldContext = instance.context;129  //   const oldProps = workInProgress.memoizedProps;130  //   if (131  //     typeof instance.componentWillReceiveProps === 'function' &&132  //     (oldProps !== newProps || oldContext !== newContext)133  //   ) {134  //     callComponentWillReceiveProps(135  //       workInProgress,136  //       instance,137  //       newProps,138  //       newContext,139  //     );140  //   }141  //   // Process the update queue before calling shouldComponentUpdate142  //   const updateQueue = workInProgress.updateQueue;143  //   if (updateQueue !== null) {144  //     newState = beginUpdateQueue(145  //       workInProgress,146  //       updateQueue,147  //       instance,148  //       newState,149  //       newProps,150  //       priorityLevel,151  //     );152  //   }153  //   // TODO: Should we deal with a setState that happened after the last154  //   // componentWillMount and before this componentWillMount? Probably155  //   // unsupported anyway.156  //   if (157  //     !checkShouldComponentUpdate(158  //       workInProgress,159  //       workInProgress.memoizedProps,160  //       newProps,161  //       workInProgress.memoizedState,162  //       newState,163  //       newContext,164  //     )165  //   ) {166  //     // Update the existing instance's state, props, and context pointers even167  //     // though we're bailing out.168  //     instance.props = newProps;169  //     instance.state = newState;170  //     instance.context = newContext;171  //     return false;172  //   }173  //   // Update the input pointers now so that they are correct when we call174  //   // componentWillMount175  //   instance.props = newProps;176  //   instance.state = newState;177  //   instance.context = newContext;178  //   if (typeof instance.componentWillMount === 'function') {179  //     callComponentWillMount(workInProgress, instance);180  //     // componentWillMount may have called setState. Process the update queue.181  //     const newUpdateQueue = workInProgress.updateQueue;182  //     if (newUpdateQueue !== null) {183  //       newState = beginUpdateQueue(184  //         workInProgress,185  //         newUpdateQueue,186  //         instance,187  //         newState,188  //         newProps,189  //         priorityLevel,190  //       );191  //     }192  //   }193  //   if (typeof instance.componentDidMount === 'function') {194  //     workInProgress.effectTag |= Update;195  //   }196  //   instance.state = newState;197  //   return true;198  // }199  // Invokes the update life-cycles and returns false if it shouldn't rerender.200  return {201    adoptClassInstance,202    constructClassInstance: function (workInProgress: Fiber, props: any): any {203      const ctor = workInProgress.type;204      const unmaskedContext = getUnmaskedContext(workInProgress);205      const needsContext = isContextConsumer(workInProgress);206      const context = needsContext ? getMaskedContext(workInProgress, unmaskedContext) : emptyObject;207      const instance = new ctor(props, context);208      adoptClassInstance(workInProgress, instance);209      // Cache unmasked context so we can avoid recreating masked context unless necessary.210      // ReactFiberContext usually updates this cache but can't for newly-created instances.211      if (needsContext) {212        cacheContext(workInProgress, unmaskedContext, context);213      }214      return instance;215    },216    mountClassInstance: function (workInProgress: Fiber, priorityLevel: PriorityLevel): void {217      const current = workInProgress.alternate;218      const instance = workInProgress.stateNode;219      const state = instance.state || null;220      let props = workInProgress.pendingProps;221      invariant(props, 'There must be pending props for an initial mount. This error is ' + 'likely caused by a bug in React. Please file an issue.');222      const unmaskedContext = getUnmaskedContext(workInProgress);223      instance.props = props;224      instance.state = state;225      instance.refs = emptyObject;226      instance.context = getMaskedContext(workInProgress, unmaskedContext);227      if (ReactFeatureFlags.enableAsyncSubtreeAPI && workInProgress.type != null && workInProgress.type.prototype != null && workInProgress.type.prototype.unstable_isAsyncReactComponent === true) {228        workInProgress.internalContextTag |= AsyncUpdates;229      }230      if (typeof instance.componentWillMount === 'function') {231        callComponentWillMount(workInProgress, instance);232        // If we had additional state updates during this life-cycle, let's233        // process them now.234        const updateQueue = workInProgress.updateQueue;235        if (updateQueue !== null) {236          instance.state = beginUpdateQueue(current, workInProgress, updateQueue, instance, state, props, priorityLevel);237        }238      }239      if (typeof instance.componentDidMount === 'function') {240        workInProgress.effectTag |= Update;241      }242    },243    // resumeMountClassInstance,244    updateClassInstance: function (current: Fiber, workInProgress: Fiber, priorityLevel: PriorityLevel): boolean {245      const instance = workInProgress.stateNode;246      resetInputPointers(workInProgress, instance);247      const oldProps = workInProgress.memoizedProps;248      let newProps = workInProgress.pendingProps;249      if (!newProps) {250        // If there aren't any new props, then we'll reuse the memoized props.251        // This could be from already completed work.252        newProps = oldProps;253        invariant(newProps != null, 'There should always be pending or memoized props. This error is ' + 'likely caused by a bug in React. Please file an issue.');254      }255      const oldContext = instance.context;256      const newUnmaskedContext = getUnmaskedContext(workInProgress);257      const newContext = getMaskedContext(workInProgress, newUnmaskedContext);258      // Note: During these life-cycles, instance.props/instance.state are what259      // ever the previously attempted to render - not the "current". However,260      // during componentDidUpdate we pass the "current" props.261      if (typeof instance.componentWillReceiveProps === 'function' && (oldProps !== newProps || oldContext !== newContext)) {262        callComponentWillReceiveProps(workInProgress, instance, newProps, newContext);263      }264      // Compute the next state using the memoized state and the update queue.265      const oldState = workInProgress.memoizedState;266      // TODO: Previous state can be null.267      let newState;268      if (workInProgress.updateQueue !== null) {269        newState = beginUpdateQueue(current, workInProgress, workInProgress.updateQueue, instance, oldState, newProps, priorityLevel);270      } else {271        newState = oldState;272      }273      if (oldProps === newProps && oldState === newState && !hasContextChanged() && !(workInProgress.updateQueue !== null && workInProgress.updateQueue.hasForceUpdate)) {274        // If an update was already in progress, we should schedule an Update275        // effect even though we're bailing out, so that cWU/cDU are called.276        if (typeof instance.componentDidUpdate === 'function') {...

MainSection.spec.js

Source:MainSection.spec.js

...34    props: props,35    output: output,36  };37}38function callComponentWillReceiveProps(props = {}, nextProps = {}) {39  class ParentClass extends Component {40    constructor() {41      super();42      this.state = props;43    }44    render() {45      return <MainSection {...this.state} />;46    }47  }48  const parent = TestUtils.renderIntoDocument(<ParentClass />);49  parent.setState(nextProps);50  return { parent, nextProps };51}52describe('components', () => {53  describe('MainSection', () => {54    it('should render components correctly', () => {55      const { output, props } = setup();56      let expectedElement = (57      <div>58        <SelectBox59          selector = {props.selector}60          isFetching = {props.isFetching}61          fetchTimetableIfNeeded = {function noRefCheck() {}}/>62        <div className="timetable-box">63          <SelectDate64            isFetching = {props.isFetching}65            fetchTimetableIfNeeded = {function noRefCheck() {}}/>66          <TimetableBox67            isFetching = {props.isFetching}68            didInvalidate = {props.didInvalidate}69            isOld = {props.isOld}70            data = {props.data}71            fetchTimetableIfNeeded = {function noRefCheck() {}}72            fetchTestToken = {function noRefCheck() {}}/>73        </div>74      </div>75      );76      expect(output).toEqualJSX(expectedElement);77    });78    it('should call fetchDefaultStatus at componentDidMount', () => {79      const props = {80        selector: {81          flightTypes: [{id: 1, name: 'type1', en: 'en1', checked: true}],82          places: [{id: 1, path: '/path1', active: true, checked: true}],83          week: 084        },85        timetableKey: '1_1_0',86        data: { date: [], timetable:[] },87        isFetching: false,88        actions: {89          fetchDefaultStatus: expect.createSpy(),90          fetchTestToken: expect.createSpy(),91          fetchTimetableIfNeeded: expect.createSpy(),92          reserve: expect.createSpy(),93          modalOff: expect.createSpy(),94        },95        modal: false96      };97      TestUtils.renderIntoDocument(<MainSection {...props} />)98      expect(props.actions.fetchDefaultStatus).toHaveBeenCalledWith();99    });100    it('should call modalOff and reserve at ComponentWillReceiveProps', (doen) => {101      const props = {102        selector: {103          flightTypes: [{id: 1, name: 'type1', en: 'en1', checked: true}],104          places: [{id: 1, path: '/path1', active: true, checked: true}],105          week: 0106        },107        timetableKey: '1_1_0',108        data: { date: [], timetable:[] },109        isFetching: false,110        actions: {111          fetchDefaultStatus: expect.createSpy(),112          fetchTestToken: expect.createSpy(),113          fetchTimetableIfNeeded: expect.createSpy(),114          reserve: expect.createSpy(),115          modalOff: expect.createSpy(),116        },117        modal: false118      };119      const { nextProps } = callComponentWillReceiveProps(120        props,121        Object.assign(props, { modal: true })122      );123      setTimeout(function(){124        expect(nextProps.actions.modalOff).toHaveBeenCalledWith();125        expect(nextProps.actions.reserve).toHaveBeenCalledWith({token: 'token'}, '1_1_0');126        doen();127      }, 1500);128    });129  });...

Using AI Code Generation

1const {callComponentWillReceiveProps} = require('playwright/lib/server/dom.js');2const {chromium} = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  await callComponentWillReceiveProps(page, 'google', 'google', {value: 'test'});7  await browser.close();8})();

Using AI Code Generation

1const { callComponentWillReceiveProps } = require('@playwright/test/lib/server/frames');2const { Page } = require('@playwright/test/lib/server/page');3const { Frame } = require('@playwright/test/lib/server/frames');4const { ElementHandle } = require('@playwright/test/lib/server/frames');5const { JSHandle } = require('@playwright/test/lib/server/frames');6async function callComponentWillReceivePropsTest() {7  const page = new Page(null, null, null);8  const frame = new Frame(page, null, null);9  const elementHandle = new ElementHandle(frame, null, null);10  const jsHandle = new JSHandle(elementHandle, null, null);11  await callComponentWillReceiveProps(jsHandle, {12  });13}14callComponentWillReceivePropsTest();

Using AI Code Generation

1const { callComponentWillReceiveProps } = require('playwright/lib/server/dom');2const { Page } = require('playwright/lib/server/page');3const { ElementHandle } = require('playwright/lib/server/dom');4const { JSHandle } = require('playwright/lib/server/javascript');5const page = new Page();6const elementHandle = new ElementHandle(page, 'div');7const jsHandle = new JSHandle(page, 'div');8callComponentWillReceiveProps(jsHandle, elementHandle);9const { JSHandle } = require('./javascript');10const { ElementHandle } = require('./dom');11module.exports.callComponentWillReceiveProps = function (jsHandle, elementHandle) {12  return jsHandle.evaluate(elementHandle, (elementHandle, arg) => {13    elementHandle.componentWillReceiveProps(arg);14  });15};16const { JSHandle } = require('./javascript');17const { ElementHandle } = require('./dom');18module.exports.callComponentWillReceiveProps = function (jsHandle, elementHandle) {19  return jsHandle.evaluate(elementHandle, (elementHandle, arg) => {20    elementHandle.componentWillReceiveProps(arg);21  });22};23const { JSHandle } = require('./javascript');24const { ElementHandle } = require('./dom');25module.exports.callComponentWillReceiveProps = function (jsHandle, elementHandle) {26  return jsHandle.evaluate(elementHandle, (elementHandle, arg) => {27    elementHandle.componentWillReceiveProps(arg);28  });29};30const { JSHandle } = require('./javascript');31const { ElementHandle } = require('./dom');32module.exports.callComponentWillReceiveProps = function (jsHandle, elementHandle) {33  return jsHandle.evaluate(elementHandle, (elementHandle, arg) => {34    elementHandle.componentWillReceiveProps(arg);35  });36};

Using AI Code Generation

1const { callComponentWillReceiveProps } = require('@playwright/test/lib/server/frames');2const { Frame } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');3const { Page } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');4const { RecorderSupplement } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');5const { RecorderSupplementController } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');6const { RecorderSupplementEvents } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');7const { RecorderSupplementState } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');8const { RecorderSupplementWorker } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');9const { RecorderSupplementWorkerState } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');10const { RecorderSupplementWorkerStateEvent } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');11const { RecorderSupplementWorkerStateEventPayload } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');12const { RecorderSupplementWorkerStatePayload } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');13const { RecorderSupplementWorkerStateType } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');14const { RecorderSupplementWorkerStateTypePayload } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');15const { RecorderSupplementWorkerStateTypePayloadEvent } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');16const { RecorderSupplementWorkerStateTypePayloadEventPayload } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');17const { RecorderSupplementWorkerStateTypePayloadPayload } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');18const { RecorderSupplementWorkerStateTypePayloadPayloadEvent } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');19const { RecorderSupplementWorkerStateTypePayloadPayloadEventPayload } = require('@playwright/test/lib/server/supplements/recorder/recorderSupplement');

Using AI Code Generation

1const {InternalComponent} = require('playwright/lib/client/selectorEngine');2InternalComponent.prototype.callComponentWillReceiveProps = function(nextProps) {3  if (this.component && this.component.componentWillReceiveProps) {4    this.component.componentWillReceiveProps(nextProps);5  }6};7InternalComponent.prototype.callComponentDidUpdate = function(prevProps, prevState) {8  if (this.component && this.component.componentDidUpdate) {9    this.component.componentDidUpdate(prevProps, prevState);10  }11};12async function main() {13  const browser = await chromium.launch({ headless: false });14  const context = await browser.newContext();15  const page = await context.newPage();16  const internalComponent = await page.$('input[name="q"]');17  await internalComponent.callComponentWillReceiveProps({value: 'test'});18  await internalComponent.callComponentDidUpdate({value: 'test'}, {value: 'test'});19  await page.screenshot({ path: `example.png` });20  await browser.close();21}22main();

Using AI Code Generation

1const { callComponentWillReceiveProps } = require('playwright/internal');2const { Page } = require('playwright');3const page = new Page();4const page = new Page();5const page = new Page();6const page = new Page();7const page = new Page();8const page = new Page();9const page = new Page();10const page = new Page();11const page = new Page();12const page = new Page();

Using AI Code Generation

1const {callComponentWillReceiveProps} = require('playwright/lib/inspector/inspector');2const { Page } = require('playwright');3const page = new Page();4callComponentWillReceiveProps(page, {some: 'props'});5const {callComponentWillReceiveProps} = require('playwright/lib/server/supplements/recorder/recorder');6const { Page } = require('playwright');7const page = new Page();8callComponentWillReceiveProps(page, {some: 'props'});9const {callComponentWillReceiveProps} = require('playwright/lib/server/supplements/recorder/recorderSupplement');10const { Page } = require('playwright');11const page = new Page();12callComponentWillReceiveProps(page, {some: 'props'});13const {callComponentWillReceiveProps} = require('playwright/lib/server/supplements/recorder/recorderSupplements');14const { Page } = require('playwright');15const page = new Page();16callComponentWillReceiveProps(page, {some: 'props'});17const {callComponentWillReceiveProps} = require('playwright/lib/server/supplements/recorder/recorderUtils');18const { Page } = require('playwright');19const page = new Page();20callComponentWillReceiveProps(page, {some: 'props'});21const {callComponentWillReceiveProps} = require('playwright/lib/server/supplements/recorder/recorderWorker');22const { Page } = require('playwright');23const page = new Page();24callComponentWillReceiveProps(page, {some: 'props'});25const {callComponentWillReceiveProps} = require('playwright/lib/server/supplements/recorder/recorderWorkerSupplement');26const { Page } = require('playwright');27const page = new Page();28callComponentWillReceiveProps(page, {some: 'props'});29const {callComponentWillReceiveProps} = require('playwright/lib/server/supplements/recorder/recorderWorkerSupplements');30const { Page } = require('playwright');

Using AI Code Generation

1const React = require('react');2const { callComponentWillReceiveProps } = require('playwright-core/lib/server/dom.js');3const ReactDOM = require('react-dom');4const { Component } = require('react');5class Test extends Component {6  constructor(props) {7    super(props);8    this.state = {9    };10  }11  componentWillReceiveProps(nextProps) {12    console.log('componentWillReceiveProps called');13  }14  render() {15    return <div>Test</div>;16  }17}18const element = React.createElement(Test);19const container = document.createElement('div');20document.body.appendChild(container);21ReactDOM.render(element, container);22callComponentWillReceiveProps(element, { data: 1 });

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.