Fix transitive js modules in tests (#2178)

scripts/bundles/helpers/jest/jest-preset.js

@@ -3,8 +3,12 @@ const testingDir = __dirname;
 const rootDir = path.join(testingDir, '..');
 const internalDir = path.join(rootDir, 'internal');
 
+// NOTE: if you change this, also change compiler/transpile.ts
+const moduleExtensions = ['ts', 'tsx', 'mjs', 'js', 'jsx'];
+const moduleExtensionRegexp = '(' + moduleExtensions.join('|') + ')';
+
 module.exports = {
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'mjs', 'jsx', 'json', 'd.ts'],
+  moduleFileExtensions: [...moduleExtensions, 'json', 'd.ts'],
   moduleNameMapper: {
     '^@stencil/core/cli$': path.join(rootDir, 'cli', 'index.js'),
     '^@stencil/core/compiler$': path.join(rootDir, 'compiler', 'stencil.js'),
@@ -21,8 +25,8 @@ module.exports = {
   testEnvironment: path.join(testingDir, 'jest-environment.js'),
   testPathIgnorePatterns: ['/.cache', '/.stencil', '/.vscode', '/dist', '/node_modules', '/www'],
   maxConcurrency: 1,
-  testRegex: '(/__tests__/.*|\\.?(test|spec))\\.(tsx?|ts?|jsx?|js?)$',
+  testRegex: '(/__tests__/.*|\\.?(test|spec))\\.' + moduleExtensionRegexp + '$',
   transform: {
-    '^.+\\.(ts|tsx|jsx|css)$': path.join(testingDir, 'jest-preprocessor.js'),
+    ['^.+\\.' + moduleExtensionRegexp + '$']: path.join(testingDir, 'jest-preprocessor.js'),
   },
 };

src/compiler/transpile.ts

@@ -124,7 +124,7 @@ const transpileJson = (results: TranspileResults) => {
   results.map = { mappings: '' };
 };
 
-// @todo: could/should this be borrowed from either tsconfig's allowJs or jest config's ?
+// NOTE: if you change this, also change scripts/bundles/helpers/jest/jest-preset.js
 const shouldTranspileModule = (ext: string) => ['tsx', 'ts', 'mjs', 'jsx', 'js'].includes(ext);
 
 export const compile = (code: string, opts: any = {}): Promise<any> => {

test/jest-spec-runner/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@stencil/jest-spec-runner",
+  "private": true,
+  "scripts": {
+    "build": "node ../../bin/stencil build",
+    "test": "node ../../bin/stencil test --spec"
+  }
+}

test/jest-spec-runner/src/components.d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface MyMixed {
+    }
+    interface MySimple {
+    }
+}
+declare global {
+    interface HTMLMyMixedElement extends Components.MyMixed, HTMLStencilElement {
+    }
+    var HTMLMyMixedElement: {
+        prototype: HTMLMyMixedElement;
+        new (): HTMLMyMixedElement;
+    };
+    interface HTMLMySimpleElement extends Components.MySimple, HTMLStencilElement {
+    }
+    var HTMLMySimpleElement: {
+        prototype: HTMLMySimpleElement;
+        new (): HTMLMySimpleElement;
+    };
+    interface HTMLElementTagNameMap {
+        "my-mixed": HTMLMyMixedElement;
+        "my-simple": HTMLMySimpleElement;
+    }
+}
+declare namespace LocalJSX {
+    interface MyMixed {
+    }
+    interface MySimple {
+    }
+    interface IntrinsicElements {
+        "my-mixed": MyMixed;
+        "my-simple": MySimple;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "my-mixed": LocalJSX.MyMixed & JSXBase.HTMLAttributes<HTMLMyMixedElement>;
+            "my-simple": LocalJSX.MySimple & JSXBase.HTMLAttributes<HTMLMySimpleElement>;
+        }
+    }
+}

test/jest-spec-runner/src/components/mixed/mixed.spec.ts

@@ -0,0 +1,24 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { MyMixed } from './mixed';
+
+describe('my-mixed', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MyMixed],
+      html: '<my-mixed></my-mixed>',
+    });
+    expect(page.root).toEqualHtml(`
+      <my-mixed>
+        <span id="esm">
+          deep esm!deep ts!
+        </span>
+        <span id="cjs">
+          deep cjs!deep ts!
+        </span>
+        <span id="ts">
+          deep esm!deep ts!
+        </span>
+      </my-mixed>
+    `);
+  });
+});

test/jest-spec-runner/src/components/mixed/mixed.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { Component, Host, h } from '@stencil/core';
+import deepEsm from '../utils/as-js-esm';
+import deepCjs from '../utils/as-js-cjs';
+import deepTs from '../utils/as-ts';
+
+@Component({
+  tag: 'my-mixed',
+  shadow: false,
+})
+export class MyMixed {
+  render() {
+    return (
+      <Host>
+        <span id="esm">{deepEsm()}</span>
+        <span id="cjs">{deepCjs()}</span>
+        <span id="ts">{deepTs()}</span>
+      </Host>
+    );
+  }
+}

test/jest-spec-runner/src/components/simple/simple.spec.ts

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { MySimple } from './simple';
+
+describe('my-simple', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MySimple],
+      html: '<my-simple></my-simple>',
+    });
+    expect(page.root).toEqualHtml(`
+      <my-simple>
+        <span>
+          simple!
+        </span>
+      </my-simple>
+    `);
+  });
+});

test/jest-spec-runner/src/components/simple/simple.tsx

@@ -0,0 +1,11 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'my-simple',
+  shadow: false,
+})
+export class MySimple {
+  render() {
+    return <span>simple!</span>;
+  }
+}

test/jest-spec-runner/src/components/utils/as-js-cjs.js

@@ -0,0 +1,4 @@
+const { deep: js } = require('./deep-js-cjs');
+const { deep: ts } = require('./deep-ts');
+
+export default () => [js, ts];

test/jest-spec-runner/src/components/utils/as-js-esm.js

@@ -0,0 +1,4 @@
+import { deep as js } from './deep-js-esm';
+import { deep as ts } from './deep-ts';
+
+export default () => [js, ts];

test/jest-spec-runner/src/components/utils/as-mjs.mjs

@@ -0,0 +1,5 @@
+import { deep as js } from './deep-js-esm';
+import { deep as ts } from './deep-ts';
+import { deep as mjs } from './deep-mjs';
+
+export default () => [js, ts, mjs];

test/jest-spec-runner/src/components/utils/as-ts.ts

@@ -0,0 +1,4 @@
+import { deep as js } from './deep-js-esm';
+import { deep as ts } from './deep-ts';
+
+export default () => [js, ts];

test/jest-spec-runner/src/components/utils/deep-js-cjs.js

@@ -0,0 +1,3 @@
+const deep = 'deep cjs!';
+
+exports.deep = deep;

test/jest-spec-runner/src/components/utils/deep-js-esm.js

@@ -0,0 +1,3 @@
+const deep = 'deep esm!';
+
+export { deep };

test/jest-spec-runner/src/components/utils/deep-mjs.mjs

@@ -0,0 +1,3 @@
+const deep = 'deep mjs!';
+
+export { deep };

test/jest-spec-runner/src/components/utils/deep-ts.ts

@@ -0,0 +1,3 @@
+const deep = 'deep ts!';
+
+export { deep };

test/jest-spec-runner/stencil.config.ts

@@ -0,0 +1,18 @@
+import { Config } from '../../internal';
+
+export const config: Config = {
+  outputTargets: [
+    {
+      type: 'dist-custom-elements-bundle',
+    },
+  ],
+  hashFileNames: false,
+  hydratedFlag: null,
+  extras: {
+    cssVarsShim: false,
+    dynamicImportShim: false,
+    safari10: false,
+    scriptDataOpts: false,
+    shadowDomShim: false,
+  },
+};

test/jest-spec-runner/tsconfig.json

@@ -0,0 +1,30 @@
+// hey! comments in my tsconfig!!
+{
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "lib": ["dom", "es2017"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    // turning this off to see what happens when people are more lax.
+    "noImplicitAny": false,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "pretty": true,
+    "target": "es2017",
+    "baseUrl": ".",
+    "paths": {
+      "@stencil/core": ["../../internal"],
+      "@stencil/core/internal": ["../../internal"],
+      "@stencil/core/testing": ["../../testing"]
+    }
+  },
+  "include": ["src"]
+}