Is it possible to disable specific React warnings from Jest (using Create React App)

Question

Recently, React started giving depreciation warnings for componentWillReceiveProps lifecycle method. I am using a library that utilized this function and the maintainers haven't updated their codebase yet.

Currently, any time I run my tests, whether it is in development or in CI, I keep getting ~30 lines of depreciation warnings for each component that the maintainer provides.

Is there a way to suppress these warnings (at least in development)?

EDIT:

I am willing to add certain comments in my files to disable warnings from a specific package if there is a chance:

// some line to disable warnings for this package
import { DateRangePicker } from 'react-dates';

Answer 1

Similar in concept to a previous answer, but a bit easier would be:

jest.spyOn(global.console, 'warn').mockImplementationOnce((message) => {
  if (!message.includes('componentWillReceiveProps')) {
    global.console.warn(message);
  }
});

If you wanted to do it across tests you could do:

let consoleSpy;

beforeAll(() => {
  consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation((message) => {
    // same implementation as above
});

afterAll(() => consoleSpy.mockRestore());

Answer 2

If you want to disable all warnings that meet some condition, keeping all other warnings, for all tests:

const originalWarn = console.warn.bind(console.warn)
beforeAll(() => {
  console.warn = (msg) => 
    !msg.toString().includes('componentWillReceiveProps') && originalWarn(msg)
})
afterAll(() => {
  console.warn = originalWarn
})

---

React codebase also contains expect(render(...)).toWarnDev(...), but that's not included in Jest documentation, you might need to investigate more if you want to use that feature.

Answer 3

So I found a way to fix these warnings for any library using react-codemod. Since this library does not work inside node_modules so have to do a little hack.

Run:

 yarn add -D react-codemod
 open ./node_modules/react-codemod/bin/cli.js

• Remove/comment line (72) >

  + // args.push('--ignore-pattern=/node_modules/');

Run:

./node_modules/.bin/react-codemod rename-unsafe-lifecycles

To this question answer with the path of the library, you want to fix...

“On which files or directory should the codemods be applied?”

./node_modules/react-dates/lib/** // or any library with issue

This could be a temporary fix till react-codemod support node_modules libraries. You can also fork the library and remove the line for yourself and use it like this inside your CI pipeline to not get any warnings like this anymore.

Answer 4

A variation on @Aprillion's answer...

I wanted to suppress certain error messages in all tests (in a create-react-app application).

I added this to my setupTests.js:

// This error is a bug fixed in React 18: https://github.com/facebook/react/pull/22114.
// Suppress it for all tests.
const BOGUS_UNMOUNTED_ERROR = (
  "Can't perform a React state update on an unmounted component."
);
const originalError = console.error.bind(console.error);
console.error = (...args) => !args.toString().includes(BOGUS_UNMOUNTED_ERROR)
  && originalError(...args);

I guess the most important difference is that I replaced (msg) with (...args) in two places, so that all arguments to console.error() were passed through. Without this, I was getting %s's in my console error messages that should have been filled in with other arguments.