1601730 - Clear all Javascript test warnings

Status: NEW

(Tree Management :: Treeherder: Frontend, defect, P3)

Description

[Armen [:armenzg]]

It's really bad these days.
A lot of it has to do with changes we have to tackle in preparation to upgrading to React 17.
I believe this would be good to be tackled by a contributor.

For example:
https://travis-ci.org/mozilla/treeherder/jobs/621145310

$ node ./node_modules/jest/bin/jest --coverage

 PASS  tests/ui/perfherder/alerts_test.jsx (6.845s)

  ● Console

    console.warn node_modules/react-dom/cjs/react-dom.development.js:12357

      Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

      

      * Move data fetching code or side effects to componentDidUpdate.

      * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

      * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

      

      Please update the following components: Modal

    console.warn node_modules/react-dom/cjs/react-dom.development.js:12357

      Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

      

      * Move data fetching code or side effects to componentDidUpdate.

      * Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

      

      Please update the following components: Modal

    console.error node_modules/react-dom/cjs/react-dom.development.js:530

      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 UncontrolledTooltip (at SimpleTooltip.jsx:25)

          in SimpleTooltip (at AlertActionPanel.jsx:169)

          in div (created by Col)

          in Col (at AlertActionPanel.jsx:168)

          in div (created by Row)

          in Row (at AlertActionPanel.jsx:149)

          in div (at AlertActionPanel.jsx:119)

          in AlertActionPanel (at AlertTable.jsx:307)

          in div (at AlertTable.jsx:295)

    console.error node_modules/react-dom/cjs/react-dom.development.js:530

      Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

          in input (created by Input)

          in Input (at Assignee.jsx:123)

          in div (created by InputGroup)

          in InputGroup (at Assignee.jsx:122)

          in Assignee (at AlertHeader.jsx:114)

          in div (created by Col)

          in Col (at AlertHeader.jsx:113)

          in div (created by Row)

          in Row (at AlertHeader.jsx:55)

          in div (created by Container)

          in Container (at AlertHeader.jsx:39)

          in AlertHeader (at AlertTable.jsx:226)

          in label (created by Label)

          in Label (at AlertTable.jsx:210)

          in div (created by FormGroup)

          in FormGroup (at AlertTable.jsx:209)

          in th (at AlertTable.jsx:205)

          in tr (at AlertTable.jsx:204)

          in thead (at AlertTable.jsx:203)

          in table (created by Table)

          in Table (at AlertTable.jsx:202)

          in form (created by Form)

          in Form (at AlertTable.jsx:201)

          in ErrorBoundary (at AlertTable.jsx:196)

          in div (created by Container)

          in Container (at AlertTable.jsx:195)

          in AlertTable (at AlertsViewControls.jsx:99)

          in AlertsViewControls (at alerts_test.jsx:228)

    console.error node_modules/react-dom/cjs/react-dom.development.js:530

      Warning: A component is changing an uncontrolled input of type text 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

          in input (created by Input)

          in Input (at Assignee.jsx:123)

          in div (created by InputGroup)

          in InputGroup (at Assignee.jsx:122)

          in Assignee (at AlertHeader.jsx:114)

          in div (created by Col)

          in Col (at AlertHeader.jsx:113)

          in div (created by Row)

          in Row (at AlertHeader.jsx:55)

          in div (created by Container)

          in Container (at AlertHeader.jsx:39)

          in AlertHeader (at AlertTable.jsx:226)

          in label (created by Label)

          in Label (at AlertTable.jsx:210)

          in div (created by FormGroup)

          in FormGroup (at AlertTable.jsx:209)

          in th (at AlertTable.jsx:205)

          in tr (at AlertTable.jsx:204)

          in thead (at AlertTable.jsx:203)

          in table (created by Table)

          in Table (at AlertTable.jsx:202)

          in form (created by Form)

          in Form (at AlertTable.jsx:201)

          in ErrorBoundary (at AlertTable.jsx:196)

          in div (created by Container)

          in Container (at AlertTable.jsx:195)

          in AlertTable (at AlertsViewControls.jsx:99)

          in AlertsViewControls (at alerts_test.jsx:228)

Comment 1

[Cameron Dawson [:camd]]

Agreed. This is a real drag while running yarn test.

Comment 2

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/treeherder/pull/6534