fix(test): trigger @watch decorators on inherited classes in jest env (#6402)

* fix(test): trigger @watch decorators on inherited classes in jest env

* chore: lint

* chore: prettier

* chore: fixup testing

---------

Co-authored-by: John Jenkins <[email protected]>

Author: johnjenkins

src/compiler/transformers/static-to-meta/class-extension.ts

@@ -170,11 +170,19 @@ function buildExtendsTree(
     } catch (_e) {
       // sad path (normally >1 levels removed): the extends type does not resolve so let's find it manually:
 
-      const currentSource = classDeclaration.getSourceFile();
-      if (!currentSource) return;
+      let currentSource: ts.SourceFile = classDeclaration.getSourceFile();
+      // try to see if we can find the class in the current source file first
+      let matchedStatement: ts.ClassDeclaration | ts.FunctionDeclaration | ts.VariableStatement;
+
+      if (!currentSource) {
+        // fallback for jest tests where getSourceFile() is undefined
+        currentSource = compilerCtx.moduleMap.entries().next()?.value[1]?.staticSourceFile;
+        matchedStatement = findClassWalk(currentSource, extendee.getText());
+      } else {
+        matchedStatement = currentSource.statements.find(matchesNamedDeclaration(extendee.getText()));
+      }
 
-      // let's see if we can find the class in the current source file first
-      const matchedStatement = currentSource.statements.find(matchesNamedDeclaration(extendee.getText()));
+      if (!currentSource) return;
 
       if (matchedStatement && ts.isClassDeclaration(matchedStatement)) {
         foundClassDeclaration = matchedStatement;

src/compiler/transformers/static-to-meta/visitor.ts

@@ -46,7 +46,10 @@ export const convertStaticToMeta = (
         moduleFile.isCollectionDependency = false;
         moduleFile.collectionName = null;
       }
-
+      if (!moduleFile.staticSourceFile) {
+        moduleFile.staticSourceFile = tsSourceFile;
+        moduleFile.staticSourceFileText = tsSourceFile.getFullText();
+      }
       return visitNode(tsSourceFile) as ts.SourceFile;
     };
   };

src/runtime/test/extends-basic.spec.tsx

@@ -1,6 +1,14 @@
-import { Component } from '@stencil/core';
+import { Component, h, Prop, Watch } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}
+
 describe('extends', () => {
   it('renders a component that extends from a base class', async () => {
     class Base {
@@ -22,4 +30,36 @@ describe('extends', () => {
       <cmp-a>base</cmp-a>
     `);
   });
+
+  it('should call inherited watch methods when props change', async () => {
+    let called = 0;
+
+    class BaseWatch {
+      @Prop() foo: string;
+
+      @Watch('foo')
+      fooChanged() {
+        called++;
+      }
+    }
+
+    @Component({ tag: 'extended-component' })
+    class ExtendedComponent extends BaseWatch {
+      render() {
+        return <div>{this.foo}</div>;
+      }
+    }
+
+    const { root } = await newSpecPage({
+      components: [ExtendedComponent],
+      html: `<extended-component></extended-component>`,
+    });
+
+    expect(called).toBe(0);
+
+    root.foo = '1';
+
+    expect(called).toBe(1);
+    expect(root.foo).toBe('1');
+  });
 });