Miłosz Orzeł

LEGACY METHODS

In preparation for async rendering, React team decided to discourage component authors from relaying on these lifecycle methods: componentWillMount, componentWillReceiveProps and componentWillUpdate (details).

If you need to use such methods you should prefix their names with UNSAFE_ (for example: UNSAFE_componentWillMount).

Methods without prefix might stop working in React 18.x (some docs are outdated and still say that the drop will happen in version 17)...

If React detects that a component uses legacy method it issues a warning (through call to console.warn) such as this:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/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://reactjs.org/link/derived-state
    * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.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: LegacyComponent

REDUCING NOISE

It's a good thing that React warns about code that uses outdated methods. If you control the code that does so, you should upgrade the names (you can even do it automatically by codemod). But what if you don't? In such case, the warnings and stack traces will clutter output of test runs increasing a chance that more serious issue goes unnoticed.

So if you want/need to suppress the legacy method warnings for selected components, you could add such override to your setupTests.js file (assuming that you've started the app with CRA):

const originalConsoleWarn = console.warn;

// Override to suppress legacy lifecycle method warnings on CHOSEN components. 
console.warn = (...args) => {
    const [firstArg, secondArg] = args;

    // Here's a sample warning we want to skip (line breaks added to limit line length):

    /* ------------------------------------------------------------------------------------------------------- 
    Warning: componentWillMount has been renamed, and is not recommended for use.
    See https://reactjs.org/link/unsafe-component-lifecycles for details.
    
    * Move code with side effects to componentDidMount, and set initial state in the constructor.
    * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode.
      In React 18.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: AnotherLegacyComponent, LegacyComponent
    ------------------------------------------------------------------------------------------------------- */

    // Notice how the message ends with a list of components which have the legacy method. 
    // This list is provided to console.warn as a second argument which is used to fill %s placeholder
    // in the message passed as the first argument.

    // We want to suppress warnings only on chosen components instead of blindly skipping all unsafe 
    // lifecycle warnings. If warning contains component outside of the skip list, then the message 
    // should not be suppressed!
    const componentsToSkip = ['LegacyComponent', 'AnotherLegacyComponent'];

    const shouldSkip = 
        typeof firstArg === 'string' && // It could also be an object!
        firstArg.includes('In React 18.x, only the UNSAFE_ name will work.') &&
        typeof secondArg === 'string' && // It could also be an object!
        secondArg.split(',').every(name => componentsToSkip.includes(name.trim()));

    !shouldSkip && originalConsoleWarn(...args);
}

We could simply go for rejecting any warn message that contains a text about _UNSAFE methods but being more picky and skipping warnings only for known components is safer. This way if some new dependency with legacy methods appears in the app, we will know about it. 

I hope the comments in the code above make it clear how the override works. Key thing to note is that console.warn can take multiple arguments (which could be strings or objects) and that React uses second argument to to fill %s placeholder with component names (comma-separated).

Overriding console methods feels a bit hacky, but might be worthwhile if you would like to fail a CI build in case of any warnings... Hopefully one day all components will have upgraded methods names (or switch to function/hooks completely) and this trick will not be needed. A built-in React feature for suppressing such warnings on selected components would be nice too. If there is such thing, please let me know :) 

SAMPLE PROJECT

GitHub repo: https://github.com/morzel85/blog-post-react-test-console-warn-filter (React 17.0.2).

Run npm install followed by npm test to see how the override in setupTest.js suppress warnings for LegacyComponent.js (3 methods) and AnotherLegacyComponent.js (1 method).