Enzyme - console.error when "mount"ing with material-ui

[John McCarthy]

The error I'm seeing:

  console.error
    Warning: Failed prop type: Invalid prop `nodeRef.current` of type `HTMLDivElement` supplied to `Transition`, expected instance of `Element`.
        at Transition (...\node_modules\react-transition-group\cjs\Transition.js:133:30)    
        at Fade (...\node_modules\@material-ui\core\node\Fade\Fade.js:53:5)
        at Backdrop (...\node_modules\@material-ui\core\node\Backdrop\Backdrop.js:70:44)    
        at MuiDialog-backdrop (...\node_modules\@emotion\react\dist\emotion-element-cb6e9ca7.cjs.dev.js:35:23)
        at div
        at MuiModal-root (...\node_modules\@emotion\react\dist\emotion-element-cb6e9ca7.cjs.dev.js:35:23)
        at Portal (...\node_modules\@material-ui\unstyled\node\Portal\Portal.js:31:5)       
        at ModalUnstyled (...\node_modules\@material-ui\unstyled\node\ModalUnstyled\ModalUnstyled.js:77:5)
        at Modal (...\node_modules\@material-ui\core\node\Modal\Modal.js:81:44)
        at MuiDialog-root (...\node_modules\@emotion\react\dist\emotion-element-cb6e9ca7.cjs.dev.js:35:23)
        at Dialog (...\node_modules\@material-ui\core\node\Dialog\Dialog.js:206:44)
        at div
        at StandardSelector ([my_workding_dir_path]\src\intercept\standardselector.tsx:25:5)
        at WrapperComponent (...\node_modules\@wojtekmaj\enzyme-adapter-utils\src\createMountWrapper.jsx:48:26)

This same warning happens for multiple components under test.

The triggering Components seem to follow the same structure.

import React, { ReactElement } from "react"

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  TextField,
} from "@material-ui/core"


type MyProps = {
   someProp: string
}
type MyState = {
   showDialog: boolean
}

export default class MyComponent extends React.PureComponent<MyProps, MyState> {
  constructor(props: IRProps) {
    super(props)
    this.state = {
      showDialog: false,
    }
  }

  /**
   * Toggle the dialog display when the control button is pressed,
   * or hide when clickaway happens
   */
  handleToggleDialog = (): void => {
    this.setState((prevState) => ({ showDialog: !prevState.showDialog }))
  }

  handleSubmit = ():void=>{
    // ...
  }

  /**
   * Handle dialog cancel button click
   */
  handleCancelClick = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ): void => {
    event.preventDefault()
    this.setState({ showDialog: false })
  }

  render(): ReactElement {
    const { showIssueForm } = this.state
    return (
      <div style={{ width: "25%" }}>
        <button
          type="button"
          style={{ marginLeft: "5%", top: "5px" }}
          onClick={this.handleToggleDialog }
        >
          Open Dialog
        </button>
        <Dialog
          fullScreen={false}
          open={showDialog}
          onClose={this.handleToggleDialog }
        >
          <DialogContent>
            Some text with a <a href="google.com">link</a>
          </DialogContent>

            <DialogActions>
              <Button
                id="submitButton"
                onClick={this.handleSubmit}
                disabled={!submitEnabled}
              >
                Submit
              </Button>
              <Button id="cancelIssueReport" onClick={this.handleCancelClick}>
                Cancel
              </Button>
            </DialogActions>
          </form>
        </Dialog>
      </div>
    )
  }
}

Ultimately, this is just an inconvenience in that "npm run coverage" will spam errors; for now I've been hiding with a beforeAll in each of the affected unit tests to silence it.

beforeAll(() => {
  console.warn(
    "05/07/2021- Surpressing external usage of console.error\r\n" +
      "Use '(test command) --silent' to turn off all console messages."
  )
  jest.spyOn(console, "error").mockImplementation()
})

Just wondering if this is a problem internally to one of the external modules, or if I need to restructure my components so they conform to the expected types.

[Wojciech Maj]

Do you see it with React 16 and enzyme-adapter-react-16?