salesforce · wjhsf · Oct 10, 2025 · Oct 10, 2025 · Oct 10, 2025 · Oct 10, 2025
@@ -13,12 +13,7 @@ const baseConfig = createConfig({
 /** @type {import("@web/test-runner").TestRunnerConfig} */
 export default {
     ...baseConfig,
-    files: [
-        'test/**/*.spec.js',
-        // Make John fix this after his PR is merged
-        '!test/template-expressions/errors/index.spec.js',
-        '!test/template-expressions/smoke-test/index.spec.js',
-    ],
+    files: ['test/**/*.spec.js'],
     plugins: [
         ...baseConfig.plugins,
         importMapsPlugin({ inject: { importMap: { imports: { lwc: './mocks/lwc.js' } } } }),

@@ -40,37 +40,43 @@ const createRollupPlugin = (input, options) => {
 
 const transform = async (ctx) => {
     const input = ctx.path.slice(1); // strip leading / from URL path to get relative file path
-
     const defaultRollupPlugin = createRollupPlugin(input);
 
+    // Override the LWC rollup plugin config on a per-file basis by searching for a comment
+    // directive /*!WTR {...}*/ and parsing the content as JSON. The spec file acts as a default
+    // location to update the config for every component file.
+    let rootConfig = {};
+    const configDirective = /(?:\/\*|<!--)!WTR\s*(.*?)(?:\*\/|-->)/s;
+    const parseConfig = (src, id) => {
+        const configStr = src.match(configDirective)?.[1];
+        if (!configStr) {
+            return rootConfig; // default config if no overrides found
+        }
+        const config = JSON.parse(configStr);
+        // id is full file path, input is relative to the package dir
+        if (id.endsWith(`/${input}`)) {
+            // this is the test entrypoint
+            rootConfig = config;
+        }
+        return config;
+    };
+
     const customLwcRollupPlugin = {
         ...defaultRollupPlugin,
         transform(src, id) {
-            let transform;
+            const { apiVersion, nativeOnly } = parseConfig(src, id);
 
-            // Override the LWC Rollup plugin to specify different options based on file name patterns.
-            // This allows us to alter the API version or other compiler props on a filename-only basis.
-            const apiVersion = id.match(/useApiVersion(\d+)/)?.[1];
-            const nativeOnly = /\.native-only\./.test(id);
+            let transform;
             if (apiVersion) {
-                // The original Karma tests only ever had filename-based config for API version 60.
-                // Filename-based config is a pattern we want to move away from, so this transform
-                // only works for that version, so that we could simplify the logic here.
-                if (apiVersion !== '60') {
-                    throw new Error(
-                        'TODO: fully implement or remove support for filename-based API version'
-                    );
-                }
-                transform = createRollupPlugin(input, {
-                    apiVersion: 60,
-                }).transform;
+                transform = createRollupPlugin(input, { apiVersion }).transform;
             } else if (nativeOnly) {
                 transform = createRollupPlugin(input, {
                     disableSyntheticShadowSupport: true,
                 }).transform;
             } else {
                 transform = defaultRollupPlugin.transform;
             }
+
             return transform.call(this, src, id);
         },
     };

@@ -1,4 +1,5 @@
+// Per-file compiler config, used in configs/plugins/serve-integration.js
+/*!WTR {"apiVersion": 60}*/
 import { LightningElement } from 'lwc';
 
-// By naming this component `useApiVersion60` we tell Karma's LWC Rollup plugin to compile it with API version 60
 export default class extends LightningElement {}
@@ -1,3 +1,5 @@
+/* Per-file compiler config, used in configs/plugins/serve-integration.js */
+/*!WTR {"nativeOnly": true}*/
 div {
     --chic: 'native';
 }
@@ -1,3 +1,5 @@
+/* Per-file compiler config, used in configs/plugins/serve-integration.js */
+/*!WTR {"nativeOnly": true}*/
 div {
     --snazzy: 'native';
 }
@@ -1,3 +1,5 @@
+/* Per-file compiler config, used in configs/plugins/serve-integration.js */
+/*!WTR {"nativeOnly": true}*/
 div {
     --chic: 'native';
 }
@@ -1,3 +1,5 @@
+/* Per-file compiler config, used in configs/plugins/serve-integration.js */
+/*!WTR {"nativeOnly": true}*/
 div {
     --snazzy: 'native';
 }
@@ -1,3 +1,5 @@
+/* Per-file compiler config, used in configs/plugins/serve-integration.js */
+/*!WTR {"nativeOnly": true}*/
 div {
     --foo: 'native';
 }
@@ -1,15 +1,20 @@
+// Per-file compiler config, used in configs/plugins/serve-integration.js
+/*!WTR {"apiVersion": 66}*/
 import { createElement } from 'lwc';
 
 import UndefinedMemberExpressionObjParent from 'x/undefinedMemberExpressionObjParent';
 import ThrowDuringCallParent from 'x/throwDuringCallParent';
+import { API_VERSION } from '../../../helpers/options';
 
-it(`should handle member expression with undefined object`, () => {
+const cteEnabled = API_VERSION >= 66;
+
+it.runIf(cteEnabled)(`should handle member expression with undefined object`, () => {
     const parent = createElement('x-parent', { is: UndefinedMemberExpressionObjParent });
     document.body.appendChild(parent);
     expect(parent.caughtError).toContain('undefined');
 });
 
-it(`should handle errors thrown during call expression`, () => {
+it.runIf(cteEnabled)(`should handle errors thrown during call expression`, () => {
     const parent = createElement('x-parent', { is: ThrowDuringCallParent });
     document.body.appendChild(parent);
     expect(parent.caughtError).toContain("I'm the Gingerbread man!");

@@ -1,8 +1,13 @@
+// Per-file compiler config, used in configs/plugins/serve-integration.js
+/*!WTR {"apiVersion": 66}*/
 import { createElement } from 'lwc';
 
 import Test from 'x/test';
+import { API_VERSION } from '../../../helpers/options';
 
-it(`should support call expressions`, () => {
+const cteEnabled = API_VERSION >= 66;
+
+it.runIf(cteEnabled)(`should support call expressions`, () => {
     const elm = createElement('x-test', { is: Test });
     document.body.appendChild(elm);