test(wtr): use vitest spy instead of custom

Author: wjhsf

packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js

@@ -32,12 +32,8 @@ const createRollupPlugin = (input, options) => {
         enableStaticContentOptimization: !DISABLE_STATIC_CONTENT_OPTIMIZATION,
         disableSyntheticShadowSupport: DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
         apiVersion: API_VERSION,
-        modules: [
-            {
-                // Assume `ctx.path` is a component file, e.g. modules/x/foo/foo.js
-                dir: path.resolve(input, '../../..'),
-            },
-        ],
+        // Assume `ctx.path` is a component file, e.g. modules/x/foo/foo.js
+        modules: [{ dir: path.resolve(input, '../../..') }],
         ...options,
     });
 };
@@ -85,6 +81,7 @@ const transform = async (ctx) => {
         plugins: [customLwcRollupPlugin],
 
         external: [
+            '@vitest/spy',
             'lwc',
             'wire-service',
             // Some helper files export functions that mutate a global state. The setup file calls

packages/@lwc/integration-not-karma/test/api/CustomElementConstructor-getter/index.spec.js

@@ -9,7 +9,7 @@ import AttrChanged from 'x/attrChanged';
 import ReflectCamel from 'x/reflectCamel';
 import WithChildElmsHasSlot from 'x/withChildElmsHasSlot';
 import WithChildElmsHasSlotLight from 'x/withChildElmsHasSlotLight';
-import { spyConsole } from '../../../helpers/console.js';
+import { spyOn } from '@vitest/spy';
 import { USE_COMMENTS_FOR_FRAGMENT_BOOKENDS } from '../../../helpers/constants.js';
 
 const vFragBookend = USE_COMMENTS_FOR_FRAGMENT_BOOKENDS ? '<!---->' : '';
@@ -69,19 +69,9 @@ it('should create custom element if it exists before customElements.define', ()
 describe('non-empty custom element', () => {
     let consoleSpy;
     beforeEach(() => {
-        consoleSpy = spyConsole();
+        consoleSpy = spyOn(console, 'warn').mockImplementation(() => {});
     });
-    afterEach(() => {
-        consoleSpy.reset();
-    });
-
-    function expectWarnings(expectedWarnings) {
-        const observedWarnings = consoleSpy.calls.warn
-            .flat()
-            .map((err) => (err instanceof Error ? err.message : err));
-
-        expect(observedWarnings).toEqual(expectedWarnings);
-    }
+    afterEach(() => consoleSpy.mockRestore());
 
     it('should log error if non-native-shadow custom element has children', () => {
         const elm = document.createElement('test-custom-element-preexisting2');
@@ -93,11 +83,11 @@ describe('non-empty custom element', () => {
             class extends WithChildElms.CustomElementConstructor {}
         );
         if (process.env.NODE_ENV !== 'production' && !process.env.NATIVE_SHADOW) {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.shadowRoot.childNodes.length).toBe(1);
@@ -123,11 +113,11 @@ describe('non-empty custom element', () => {
         );
 
         if (process.env.NODE_ENV !== 'production') {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.innerHTML).toBe(`${vFragBookend}${vFragBookend}`);
@@ -143,11 +133,11 @@ describe('non-empty custom element', () => {
             class extends WithChildElmsHasSlot.CustomElementConstructor {}
         );
         if (process.env.NODE_ENV !== 'production' && !process.env.NATIVE_SHADOW) {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.shadowRoot.childNodes.length).toBe(1);
@@ -174,11 +164,11 @@ describe('non-empty custom element', () => {
         );
 
         if (process.env.NODE_ENV === 'production') {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         } else {
-            expectWarnings([
-                'Found an existing shadow root for the custom element "Child". Call `hydrateComponent` instead.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Found an existing shadow root for the custom element "Child". Call `hydrateComponent` instead.'
+            );
         }
         expect(elm.shadowRoot.innerHTML).toBe('<div></div>');
     });
@@ -194,11 +184,11 @@ describe('non-empty custom element', () => {
         document.body.appendChild(elm);
 
         if (process.env.NODE_ENV !== 'production' && !process.env.NATIVE_SHADOW) {
-            expectWarnings([
-                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.',
-            ]);
+            expect(consoleSpy).toHaveBeenCalledExactlyOnceWith(
+                'Light DOM and synthetic shadow custom elements cannot have child nodes. Ensure the element is empty, including whitespace.'
+            );
         } else {
-            expectWarnings([]);
+            expect(consoleSpy).not.toHaveBeenCalled();
         }
 
         expect(elm.childNodes.length).toBe(1);

packages/@lwc/integration-not-karma/test/template/directive-for-each/index.spec.js

@@ -3,7 +3,7 @@ import XTest from 'x/test';
 import XTestStatic from 'x/testStatic';
 import XTestCustomElement from 'x/testCustomElement';
 import ArrayNullPrototype from 'x/arrayNullPrototype';
-import { spyConsole } from '../../../helpers/console.js';
+import { spyOn } from '@vitest/spy';
 
 function testForEach(type, obj) {
     it(`should render ${type}`, () => {
@@ -73,14 +73,10 @@ it('should throw an error when the passing a non iterable', () => {
 
 describe('null/undefined values', () => {
     let spy;
-
-    beforeEach(() => {
-        spy = spyConsole();
-    });
-
-    afterEach(() => {
-        spy.reset();
+    beforeAll(() => {
+        spy = spyOn(console, 'error').mockImplementation(() => {});
     });
+    afterEach(() => spy.mockRestore());
 
     [undefined, null].forEach((value) => {
         it(`should log an error when passing in ${value}`, async () => {
@@ -93,13 +89,16 @@ describe('null/undefined values', () => {
             expect(elm.shadowRoot.querySelector('ul').children.length).toBe(0);
 
             if (process.env.NODE_ENV === 'production') {
-                expect(spy.calls.error.length).toBe(0);
+                expect(spy).not.toHaveBeenCalled();
             } else {
-                expect(spy.calls.error.length).toBe(1);
-                const err = spy.calls.error[0][0]; // first arg of first call
-                expect(err).toBeInstanceOf(Error);
-                // TODO [#1283]: Improve this error message. The vm should not be exposed and the message is not helpful.
-                expect(err.message).toMatch(/It must be an array-like object/);
+                expect(spy).toHaveBeenCalledTimes(1);
+                expect(spy).toHaveBeenCalledWith(expect.any(Error));
+                expect(spy).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        // TODO [#1283]: Improve this error message. The vm should not be exposed and the message is not helpful.
+                        message: expect.stringMatching(/It must be an array-like object/),
+                    })
+                );
             }
         });
     });