diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts
index 6a77afc73cd..a544d71c122 100644
--- a/src/declarations/stencil-public-compiler.ts
+++ b/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 {
diff --git a/src/runtime/test/prop-warnings.spec.tsx b/src/runtime/test/prop-warnings.spec.tsx
index cb60fe9e213..558ec585f6d 100644
--- a/src/runtime/test/prop-warnings.spec.tsx
+++ b/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: ``,
+ });
- const { root, waitForChanges } = await newSpecPage({
- components: [CmpA],
- html: ``,
+ expect(root).toEqualHtml('1');
+
+ await root.update();
+ await waitForChanges();
+
+ expect(root).toEqualHtml('2');
+ expect(spy).not.toHaveBeenCalled();
});
+ });
- expect(root).toEqualHtml('1');
+ 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('2');
- 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: ``,
+ });
+
+ expect(root).toEqualHtml('1');
+
+ await root.update();
+ await waitForChanges();
+
+ expect(root).toEqualHtml('2');
+ 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 () => {
diff --git a/src/testing/platform/testing-log.ts b/src/testing/platform/testing-log.ts
index c1a2711dddf..2fb17dbca78 100644
--- a/src/testing/platform/testing-log.ts
+++ b/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,13 +11,17 @@ 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[]) => {
@@ -24,3 +29,7 @@ export const consoleDevInfo = (..._: any[]) => {
};
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');
+}
diff --git a/src/testing/testing.ts b/src/testing/testing.ts
index f932453ce89..9ef9956f3ab 100644
--- a/src/testing/testing.ts
+++ b/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;
}