Update console watcher in jest to not throw

What does this MR do and why?

Related to #396779. We definitely don't want to throw from our console in the middle of execution, but we also want to fail tests when unexpected console.warn or console.error happen.

This introduces a fairly straightforward ConsoleWatcher utility to replace our existing implementation. This watcher keeps track of calls and certain messages to ignore. In our test_setup, there's an afterEach which will throw if any calls are found.

This also introduces a helpful ignoreVueConsoleWarnings so that the current tests which cause failures can be opted out. It also introduces a useConsoleWatcherThrowsImmediately helper for tests that are actually dependent on the legacy behavior of console.warn and console.error throwing. This way we can iteratively fix these warnings while strengthening the harness of current and future tests.

PLEASE NOTE: We do not actually use these helper methods in this MR. We'll handle this in a follow-up MR's since there are a lot of tests to cover.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

When there are unexpected calls to console.warn or console.error, this is what the error message looks like:

How to set up and validate locally

Patch

diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js
index 40f2be06e4c6..d744d540efa6 100644
--- a/spec/frontend/environment.js
+++ b/spec/frontend/environment.js
@@ -20,13 +20,7 @@ class CustomEnvironment extends TestEnvironment {
     setGlobalDateToFakeDate();
 
     this.jestConsoleWatcher = setupConsoleWatcher(this, context.console, {
-      ignores: [
-        /The updateQuery callback for fetchMore is deprecated/,
-        // TODO: Remove this and replace with localized calls to `ignoreVueConsoleWarnings`
-        // https://gitlab.com/gitlab-org/gitlab/-/issues/396779#note_1788506238
-        /^\[Vue warn\]: Missing required prop/,
-        /^\[Vue warn\]: Invalid prop/,
-      ],
+      ignores: [/The updateQuery callback for fetchMore is deprecated/],
       // TODO: Remove this and replace with localized calls to `useConsoleWatcherThrowsImmediately`
       // https://gitlab.com/gitlab-org/gitlab/-/issues/396779#note_1788506238
       shouldThrowImmediately: true,
diff --git a/spec/frontend/protected_branches/protected_branch_edit_spec.js b/spec/frontend/protected_branches/protected_branch_edit_spec.js
index 301b0e8e1572..b6376cd81a17 100644
--- a/spec/frontend/protected_branches/protected_branch_edit_spec.js
+++ b/spec/frontend/protected_branches/protected_branch_edit_spec.js
@@ -7,6 +7,7 @@ import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import ProtectedBranchEdit from '~/protected_branches/protected_branch_edit';
 import waitForPromises from 'helpers/wait_for_promises';
+import { ignoreVueConsoleWarnings } from 'helpers/console_watcher';
 
 jest.mock('~/alert');
 
@@ -60,6 +61,8 @@ const INIT_MERGE_DATA_TESTID = 'js-allowed-to-merge';
 const INIT_PUSH_DATA_TESTID = 'js-allowed-to-push';
 
 describe('ProtectedBranchEdit', () => {
+  ignoreVueConsoleWarnings();
+
   let mock;
 
   const findForcePushToggle = () =>

1. Apply this patch ☝
2. Run yarn run jest spec/frontend/protected_branches/protected_branch_edit_spec.js
3. Notice how the console warnings don't fail the test
4. Comment out the ignoreVueConsoleWarnings() line
5. Run yarn run jest spec/frontend/protected_branches/protected_branch_edit_spec.js
6. Notice the console warnings failing the test without catastrophically throwing in the middle of execution