fix(compiler): add flag to silence compiler warnings during testing

src/declarations/stencil-public-compiler.ts

@@ -2004,6 +2004,14 @@ export interface TestingConfig extends JestConfig {
    * Amount of time in milliseconds to wait before a screenshot is taken.
    */
   waitBeforeScreenshot?: number;
+
+  /**
+   * Specify what type of Stencil compiler logs you want to see.
+   * Possible values:
+   *  - error (default)
+   *  - warn
+   */
+  compilerLogLevel?: string;
 }
 
 export interface EmulateConfig {

src/runtime/test/prop-warnings.spec.tsx

@@ -7,34 +7,70 @@ describe('prop', () => {
   afterEach(() => spy.mockReset());
   afterAll(() => spy.mockRestore());
 
-  it('should show warning when immutable prop is mutated', async () => {
-    @Component({ tag: 'cmp-a' })
-    class CmpA {
-      @Prop() a = 1;
-
-      @Method()
-      async update() {
-        this.a = 2;
+  describe('by default', () => {
+    it('should not show warning when immutable prop is mutated', async () => {
+      @Component({ tag: 'cmp-a' })
+      class CmpA {
+        @Prop() a = 1;
+
+        @Method()
+        async update() {
+          this.a = 2;
+        }
+
+        render() {
+          return `${this.a}`;
+        }
       }
 
-      render() {
-        return `${this.a}`;
-      }
-    }
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`,
+      });
 
-    const { root, waitForChanges } = await newSpecPage({
-      components: [CmpA],
-      html: `<cmp-a></cmp-a>`,
+      expect(root).toEqualHtml('<cmp-a>1</cmp-a>');
+
+      await root.update();
+      await waitForChanges();
+
+      expect(root).toEqualHtml('<cmp-a>2</cmp-a>');
+      expect(spy).not.toHaveBeenCalled();
     });
+  });
 
-    expect(root).toEqualHtml('<cmp-a>1</cmp-a>');
+  describe('when compilerLogLevel is set to "warn"', () => {
+    beforeEach(() => (process.env.__STENCIL_TEST_LOGLEVEL = 'warn'));
+    afterEach(() => delete process.env.__STENCIL_TEST_LOGLEVEL);
 
-    await root.update();
-    await waitForChanges();
+    it('should show warning when immutable prop is mutated', async () => {
+      @Component({ tag: 'cmp-a' })
+      class CmpA {
+        @Prop() a = 1;
 
-    expect(root).toEqualHtml('<cmp-a>2</cmp-a>');
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy.mock.calls[0][0]).toMatch(/@Prop\(\) "[A-Za-z-]+" on <[A-Za-z-]+> is immutable/);
+        @Method()
+        async update() {
+          this.a = 2;
+        }
+
+        render() {
+          return `${this.a}`;
+        }
+      }
+
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`,
+      });
+
+      expect(root).toEqualHtml('<cmp-a>1</cmp-a>');
+
+      await root.update();
+      await waitForChanges();
+
+      expect(root).toEqualHtml('<cmp-a>2</cmp-a>');
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy.mock.calls[0][0]).toMatch(/@Prop\(\) "[A-Za-z-]+" on <[A-Za-z-]+> is immutable/);
+    });
   });
 
   it('should not show warning when mutable prop is mutated', async () => {

src/testing/platform/testing-log.ts

@@ -2,6 +2,7 @@ import type * as d from '../../declarations';
 import { caughtErrors } from './testing-constants';
 
 let customError: d.ErrorHandler | undefined;
+const LOG_LEVELS: string[] = ['warn', 'error'];
 
 const defaultConsoleError = (e: any) => {
   caughtErrors.push(e);
@@ -10,17 +11,25 @@ const defaultConsoleError = (e: any) => {
 export const consoleError: d.ErrorHandler = (e: any, el?: any) => (customError || defaultConsoleError)(e, el);
 
 export const consoleDevError = (...e: any[]) => {
-  caughtErrors.push(new Error(e.join(', ')));
+  if (allowLog('error')) {
+    caughtErrors.push(new Error(e.join(', ')));
+  }
 };
 
 export const consoleDevWarn = (...args: any[]) => {
-  // log warnings so we can spy on them when testing
-  const params = args.filter((a) => typeof a === 'string' || typeof a === 'number' || typeof a === 'boolean');
-  console.warn(...params);
+  if (allowLog('warn')) {
+    // log warnings so we can spy on them when testing
+    const params = args.filter((a) => typeof a === 'string' || typeof a === 'number' || typeof a === 'boolean');
+    console.warn(...params);
+  }
 };
 
 export const consoleDevInfo = (..._: any[]) => {
   /* noop for testing */
 };
 
 export const setErrorHandler = (handler: d.ErrorHandler | undefined) => (customError = handler);
+
+function allowLog(log: string): boolean {
+  return LOG_LEVELS.indexOf(log) >= LOG_LEVELS.indexOf(process.env.__STENCIL_TEST_LOGLEVEL ?? 'error');
+}

src/testing/testing.ts

@@ -236,5 +236,9 @@ function setupTestingConfig(validatedConfig: ValidatedConfig): ValidatedConfig {
     validatedConfig.watch = true;
   }
 
+  if (validatedConfig?.testing?.compilerLogLevel) {
+    process.env.__STENCIL_TEST_LOGLEVEL = validatedConfig.testing.compilerLogLevel.toLowerCase().trim();
+  }
+
   return validatedConfig;
 }