Fixing up StrictMode errors in the e2e tests.

[pento]

Blocks #14845.

Describe the bug

Turning on StrictMode gives a bunch of errors, this is a tracking ticket to list them out.

I'll list one per comment, along with an e2e test that generates the error.

To reproduce

Run the e2e tests with SCRIPT_DEBUG set to true.

[pento]

Test: npm run test-e2e packages/e2e-tests/specs/links.test.js

Links › can be created by selecting text and using keyboard shortcuts

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s the componentWillUnmount method 
        in URLInput
        in Unknown (created by WithSelect(URLInput))
        in WithSelect(URLInput) (created by WithInstanceId(WithSelect(URLInput)))
        in WithInstanceId(WithSelect(URLInput)) (created by WithSpokenMessages(WithInstanceId(WithSelect(URLInput))))
        in WithSpokenMessages(WithInstanceId(WithSelect(URLInput))) (created by WithSafeTimeout(WithSpokenMessages(WithInstanceId(WithSelect(URLInput)))))
        in WithSafeTimeout(WithSpokenMessages(WithInstanceId(WithSelect(URLInput)))) (created by LinkEditor)
        in form (created by LinkEditor)
        in LinkEditor (created by InlineLinkUI)
        in div (created by URLPopover)
        in div (created by URLPopover)
        in div (created by Animate)
        in div (created by IsolatedEventContainer)
        in IsolatedEventContainer (created by Animate)
        in Animate (created by Popover)
        in PopoverDetectOutside (created by WithFocusOutside(PopoverDetectOutside))
        in div (created by WithFocusOutside(PopoverDetectOutside))
        in WithFocusOutside(PopoverDetectOutside) (created by Popover)
        in Unknown (created by FocusReturn)
        in div (created by FocusReturn)
        in FocusReturn (created by Context.Consumer)
        in WithFocusReturn(Component) (created by WithConstrainedTabbing(WithFocusReturn(Component)))
        in div (created by WithConstrainedTabbing(WithFocusReturn(Component)))
        in WithConstrainedTabbing(WithFocusReturn(Component)) (created by Popover)"]

[pento]

Test: npm run test-e2e packages/e2e-tests/specs/reusable-blocks.test.js

Reusable Blocks › can be created

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s the componentWillUnmount method 
        in SlotComponent (created by Context.Consumer)
        in Slot (created by __experimentalBlockSettingsMenuPluginsExtensionSlot)
        in __experimentalBlockSettingsMenuPluginsExtensionSlot (created by Dropdown)
        in div (created by MenuGroup)
        in div (created by MenuGroup)
        in MenuGroup (created by WithInstanceId(MenuGroup))
        in WithInstanceId(MenuGroup) (created by Dropdown)
        in div (created by NavigableContainer)
        in NavigableContainer (created by ForwardRef(NavigableContainer))
        in ForwardRef(NavigableContainer) (created by ForwardRef(NavigableMenu))
        in ForwardRef(NavigableMenu) (created by Dropdown)
        in div (created by Animate)
        in div (created by IsolatedEventContainer)
        in IsolatedEventContainer (created by Animate)
        in Animate (created by Popover)
        in PopoverDetectOutside (created by WithFocusOutside(PopoverDetectOutside))
        in div (created by WithFocusOutside(PopoverDetectOutside))
        in WithFocusOutside(PopoverDetectOutside) (created by Popover)
        in Unknown (created by FocusReturn)
        in div (created by FocusReturn)
        in FocusReturn (created by Context.Consumer)
        in WithFocusReturn(Component) (created by WithConstrainedTabbing(WithFocusReturn(Component)))
        in div (created by WithConstrainedTabbing(WithFocusReturn(Component)))
        in WithConstrainedTabbing(WithFocusReturn(Component)) (created by Popover)
        in FillComponent (created by Context.Consumer)
        in Fill (created by Context.Consumer)
        in span (created by Context.Consumer)
        in Popover (created by Dropdown)
        in div (created by Dropdown)
        in Dropdown (created by DropdownMenu)
        in DropdownMenu (created by BlockActions)
        in div (created by ToolbarContainer)
        in ToolbarContainer (created by Toolbar)
        in Toolbar (created by BlockActions)
        in BlockActions (created by WithDispatch(BlockActions))
        in WithDispatch(BlockActions)
        in Unknown (created by WithSelect(WithDispatch(BlockActions)))
        in WithSelect(WithDispatch(BlockActions)) (created by BlockSettingsMenu)
        in BlockSettingsMenu (created by BlockToolbar)
        in div (created by BlockToolbar)
        in BlockToolbar
        in Unknown (created by WithSelect(BlockToolbar))
        in WithSelect(BlockToolbar) (created by BlockContextualToolbar)
        in div (created by NavigableContainer)
        in NavigableContainer (created by ForwardRef(NavigableContainer))
        in ForwardRef(NavigableContainer) (created by ForwardRef(NavigableMenu))
        in ForwardRef(NavigableMenu) (created by NavigableToolbar)
        in NavigableToolbar (created by BlockContextualToolbar)
        in BlockContextualToolbar (created by BlockListBlock)
        in div (created by BlockListBlock)
        in div (created by ForwardRef)
        in ForwardRef (created by IgnoreNestedEvents)
        in IgnoreNestedEvents (created by ForwardRef(IgnoreNestedEvents))
        in ForwardRef(IgnoreNestedEvents) (created by BlockListBlock)
        in BlockListBlock
        in Unknown
        in Unknown (created by (BlockListBlock))
        in (BlockListBlock) (created by WithFilters(BlockListBlock))
        in WithFilters(BlockListBlock) (created by IfCondition(WithFilters(BlockListBlock)))
        in IfCondition(WithFilters(BlockListBlock)) (created by WithDispatch(IfCondition(WithFilters(BlockListBlock))))
        in WithDispatch(IfCondition(WithFilters(BlockListBlock)))
        in Unknown (created by WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock)))))
        in WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock))))
        in Unknown (created by Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock)))))))
        in Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock)))))) (created by BlockList)
        in BlockAsyncModeProvider (created by BlockList)"]

[pento]

(I don't know if the SlotComponent errors are all the same thing, or different things with similar symptoms, so posting them all.)

Test: npm run test-e2e packages/e2e-tests/specs/table.test.js

Table › allows header and footer rows to be switched on and off

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s the componentWillUnmount method 
        in SlotComponent (created by Context.Consumer)
        in Slot (created by FormatToolbar)
        in div (created by ToolbarContainer)
        in ToolbarContainer (created by Toolbar)
        in Toolbar (created by FormatToolbar)
        in div (created by FormatToolbar)
        in FormatToolbar (created by RichText)
        in FillComponent (created by Context.Consumer)
        in Fill (created by BlockFormatControlsFill)
        in BlockFormatControlsFill (created by Context.Consumer)
        in IfBlockEditSelected(BlockFormatControlsFill) (created by RichText)"]

[pento]

Test: npm run test-e2e packages/e2e-tests/specs/plugins/meta-attribute-block.test.js

Block with a meta attribute › Should persist the meta attribute properly

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: A component is changing an uncontrolled input of type %s to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components%s undefined 
        in input (created by edit)
        in edit (created by Edit)
        in Edit (created by WithToolbarControls(Edit))
        in WithToolbarControls(Edit) (created by WithInspectorControl(WithToolbarControls(Edit)))
        in WithInspectorControl(WithToolbarControls(Edit)) (created by WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))
        in WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))
        in Unknown (created by WithDispatch(Component))
        in WithDispatch(Component)
        in Unknown (created by WithMultipleValidation(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))))
        in WithMultipleValidation(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))) (created by WithFilters(Edit))
        in WithFilters(Edit) (created by BlockEdit)
        in BlockEdit (created by BlockListBlock)
        in BlockCrashBoundary (created by BlockListBlock)
        in div (created by IgnoreNestedEvents)
        in IgnoreNestedEvents (created by ForwardRef(IgnoreNestedEvents))
        in ForwardRef(IgnoreNestedEvents) (created by BlockListBlock)
        in div (created by BlockListBlock)
        in div (created by ForwardRef)
        in ForwardRef (created by IgnoreNestedEvents)
        in IgnoreNestedEvents (created by ForwardRef(IgnoreNestedEvents))
        in ForwardRef(IgnoreNestedEvents) (created by BlockListBlock)
        in BlockListBlock
        in Unknown
        in Unknown (created by (BlockListBlock))
        in (BlockListBlock) (created by WithFilters(BlockListBlock))
        in WithFilters(BlockListBlock) (created by IfCondition(WithFilters(BlockListBlock)))
        in IfCondition(WithFilters(BlockListBlock)) (created by WithDispatch(IfCondition(WithFilters(BlockListBlock))))
        in WithDispatch(IfCondition(WithFilters(BlockListBlock)))
        in Unknown (created by WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock)))))
        in WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock))))
        in Unknown (created by Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock)))))))
        in Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(BlockListBlock)))))) (created by BlockList)
        in BlockAsyncModeProvider (created by BlockList)
        in div (created by BlockList)
        in BlockList (created by WithDispatch(BlockList))
        in WithDispatch(BlockList)
        in Unknown (created by WithSelect(WithDispatch(BlockList)))
        in WithSelect(WithDispatch(BlockList))
        in Unknown (created by VisualEditor)
        in div (created by CopyHandler)
        in CopyHandler (created by WithDispatch(CopyHandler))
        in WithDispatch(CopyHandler) (created by VisualEditor)
        in div (created by ObserveTyping)
        in ObserveTyping (created by WithSafeTimeout(ObserveTyping))
        in WithSafeTimeout(ObserveTyping) (created by WithDispatch(WithSafeTimeout(ObserveTyping)))
        in WithDispatch(WithSafeTimeout(ObserveTyping))
        in Unknown (created by WithSelect(WithDispatch(WithSafeTimeout(ObserveTyping))))
        in WithSelect(WithDispatch(WithSafeTimeout(ObserveTyping))) (created by VisualEditor)
        in div (created by WritingFlow)
        in div (created by WritingFlow)
        in WritingFlow (created by WithDispatch(WritingFlow))
        in WithDispatch(WritingFlow)
        in Unknown (created by WithSelect(WithDispatch(WritingFlow)))
        in WithSelect(WithDispatch(WritingFlow)) (created by VisualEditor)
        in div (created by Typewriter)
        in Typewriter
        in Unknown (created by WithSelect(Typewriter))
        in WithSelect(Typewriter) (created by VisualEditor)
        in div (created by BlockSelectionClearer)
        in BlockSelectionClearer (created by WithDispatch(BlockSelectionClearer))
        in WithDispatch(BlockSelectionClearer)
        in Unknown (created by WithSelect(WithDispatch(BlockSelectionClearer)))
        in WithSelect(WithDispatch(BlockSelectionClearer)) (created by VisualEditor)
        in VisualEditor (created by Layout)
        in div (created by Layout)
        in div (created by FocusReturnProvider)
        in FocusReturnProvider (created by Layout)
        in Layout
        in Unknown (created by WithViewportMatch(Layout))
        in WithViewportMatch(Layout) (created by NavigateRegions(WithViewportMatch(Layout)))
        in div (created by NavigateRegions(WithViewportMatch(Layout)))
        in NavigateRegions(WithViewportMatch(Layout)) (created by WithDispatch(NavigateRegions(WithViewportMatch(Layout))))
        in WithDispatch(NavigateRegions(WithViewportMatch(Layout)))
        in Unknown (created by WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Layout)))))
        in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Layout)))) (created by Editor)
        in ErrorBoundary (created by Editor)
        in BlockEditorProvider (created by WithDispatch(BlockEditorProvider))
        in WithDispatch(BlockEditorProvider)
        in Unknown (created by Context.Consumer)
        in WithRegistryProvider(WithDispatch(BlockEditorProvider)) (created by EditorProvider)
        in EditorProvider (created by WithDispatch(EditorProvider))
        in WithDispatch(EditorProvider)
        in Unknown (created by WithSelect(WithDispatch(EditorProvider)))
        in WithSelect(WithDispatch(EditorProvider))
        in Unknown (created by Context.Consumer)
        in WithRegistryProvider(WithSelect(WithDispatch(EditorProvider))) (created by Editor)
        in div (created by DropZoneProvider)
        in DropZoneProvider (created by Editor)
        in SlotFillProvider (created by Editor)
        in StrictMode (created by Editor)
        in Editor (created by WithDispatch(Editor))
        in WithDispatch(Editor)
        in Unknown (created by WithSelect(WithDispatch(Editor)))
        in WithSelect(WithDispatch(Editor))"]

[pento]

Test: npm run test-e2e packages/e2e-tests/specs/datepicker.test.js

Datepicker › should show the publishing date if the date is in the past

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Warning: Unsafe lifecycle methods were found within a strict-mode tree:%s
    
    %s
    
    Learn more about this warning here:
    https://fb.me/react-strict-mode-warnings 
        in StrictMode (created by Editor)
        in Editor (created by WithDispatch(Editor))
        in WithDispatch(Editor)
        in Unknown (created by WithSelect(WithDispatch(Editor)))
        in WithSelect(WithDispatch(Editor)) componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: CalendarMonth, CalendarMonthGrid, DayPicker, DayPickerSingleDateController, OutsideClickHandler
    
    componentWillUpdate: Please update the following components to use componentDidUpdate instead: DayPicker, DayPickerSingleDateController"],["Warning: Legacy context API has been detected within a strict-mode tree: %s
    
    Please update the following components: %s
    
    Learn more about this warning here:
    https://fb.me/react-strict-mode-warnings 
        in StrictMode (created by Editor)
        in Editor (created by WithDispatch(Editor))
        in WithDispatch(Editor)
        in Unknown (created by WithSelect(WithDispatch(Editor)))
        in WithSelect(WithDispatch(Editor)) withStyles(CalendarDay), withStyles(CalendarMonth), withStyles(CalendarMonthGrid), withStyles(DayPicker), withStyles(DayPickerNavigation)"]

[thomasplevy]

@pento

I'm seeing these (or possibly related) errors when using a RichText component inside the edit() method of a custom block.

It looks like the errors are coming from the Toolbar components on the RichText control, but I'm not positive.

I've been trying to figure out if I'm doing something wrong (ie trying to mount the components on an unmounted component) but I'm really not a React expert (yet) and I don't know exactly what this means or how to debug it further.

Is this something that's actually coming from a core package or, if this is on me, do you have any advice or recommendations for me on either where to look to learn more about how to do this properly?

Thanks!

Full error (in case it helps):

react-dom.js?ver=16.9.0:539 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in SlotComponent (created by Context.Consumer)
    in Slot (created by FormatToolbar)
    in div (created by ToolbarContainer)
    in ToolbarContainer (created by Toolbar)
    in Toolbar (created by FormatToolbar)
    in div (created by FormatToolbar)
    in FormatToolbar (created by RichText)
    in fill_FillComponent (created by Context.Consumer)
    in Fill (created by BlockFormatControlsFill)
    in BlockFormatControlsFill (created by Context.Consumer)
    in IfBlockEditSelected(BlockFormatControlsFill) (created by RichText)

[youknowriad]

@gziolo Is this still the case, I think you worked on related things lately?

[gziolo]

I was working on different issues lately. This is still valid and it's blocking #14845 - use SCRIPT_DEBUG in end-to-end test environment.