web-test-runner.config.js

// eslint-disable-next-line import/no-extraneous-dependencies
import { importMapsPlugin } from '@web/dev-server-import-maps';
// eslint-disable-next-line import/no-extraneous-dependencies
import { defaultReporter } from '@web/test-runner';

function axTreePlugin() {
  return {
    name: 'ax-tree',
    async executeCommand({ command, payload, session }) {
      if (command !== 'ax-tree') return undefined;
      const page = session.browser.getPage(session.id);
      const root = await page.$(payload.selector);
      return root && page.accessibility.snapshot({ interestingOnly: false, root });
    },
  };
}

function customReporter() {
  return {
    async reportTestFileResults({ logger, sessionsForTestFile }) {
      sessionsForTestFile.forEach((session) => {
        session.testResults.tests.forEach((test) => {
          if (!test.passed && !test.skipped) {
            logger.log(test);
          }
        });
      });
    },
  };
}
export default {
  coverageConfig: {
    exclude: [
      '**/mocks/**',
      '**/node_modules/**',
      '**/test/**',
      '**/deps/**',
    ],
  },
  plugins: [
    importMapsPlugin(
      {
        inject: {
          importMap: {
            imports: {
              'da-y-wrapper': '/deps/da-y-wrapper/dist/index.js',
              'da-lit': '/deps/lit/dist/index.js',
              'da-parser': '/deps/da-parser/dist/index.js',
              'hast-util-from-html': '/test/fixtures/hast-stub.js',
            },
          },
        },
      },
    ),
    axTreePlugin(),
  ],
  reporters: [
    defaultReporter({ reportTestResults: true, reportTestProgress: true }),
    customReporter(),
  ],
  testRunnerHtml: (testFramework) => `
    <html>
      <head>
        <script>
          // WTR clones every message with structuredClone before sending it. A failed assertion
          // whose actual/expected holds a function or DOM node makes that throw, so the result
          // is never reported and the run hangs until testsFinishTimeout. For WTR's own messages
          // only, fall back to a lossy copy so the failure is reported instead.
          (() => {
            const nativeClone = window.structuredClone;
            const toCloneable = (value, seen) => {
              if (typeof value === 'function') return '[Function ' + (value.name || 'anonymous') + ']';
              if (typeof value !== 'object' || value === null) return value;
              if (value === window) return '[Window]';
              if (value instanceof Node) return '[' + value.nodeName + ']';
              if (value instanceof Error) return { name: value.name, message: value.message, stack: value.stack };
              if (seen.has(value)) return seen.get(value);
              try { return nativeClone.call(window, value); } catch (e) { /* has uncloneable parts */ }
              const copy = Array.isArray(value) ? [] : {};
              seen.set(value, copy);
              Object.keys(value).forEach((key) => {
                copy[key] = toCloneable(value[key], seen);
              });
              return copy;
            };
            window.structuredClone = function structuredClone(value, options) {
              try {
                return nativeClone.call(window, value, options);
              } catch (e) {
                const fromRunner = String(new Error().stack).includes('__web-dev-server__web-socket');
                if (e.name !== 'DataCloneError' || !fromRunner) throw e;
                return toCloneable(value, new WeakMap());
              }
            };
          })();
        </script>
        <script type='module'>
          const oldFetch = window.fetch;
          window.fetch = async (resource, options) => {
            if (!resource.startsWith('/') && !resource.startsWith('http://localhost')) {
              console.error(
                '** fetch request for an external resource is disallowed in unit tests, please find a way to mock! https://github.com/orgs/adobecom/discussions/127 provides guidance on how to fix the issue.',
                resource
              );
            }
            return oldFetch.call(window, resource, options);
          };

          const oldXHROpen = XMLHttpRequest.prototype.open;
          XMLHttpRequest.prototype.open = async function (...args) {
            let [method, url, asyn] = args;
            if (!resource.startsWith('/') && url.startsWith('http://localhost')) {
              console.error(
                '** XMLHttpRequest request for an external resource is disallowed in unit tests, please find a way to mock! https://github.com/orgs/adobecom/discussions/127 provides guidance on how to fix the issue.',
                url
              );
            }
            return oldXHROpen.apply(this, args);
          };

          const observer = new MutationObserver((mutationsList, observer) => {
            for(let mutation of mutationsList) {
              if (mutation.type === 'childList') {
                for(let node of mutation.addedNodes) {
                  if(node.nodeName === 'SCRIPT' && node.src && !node.src.startsWith('http://localhost')) {
                    console.error(
                      '** An external 3rd script has been added. This is disallowed in unit tests, please find a way to mock! https://github.com/orgs/adobecom/discussions/814#discussioncomment-6060891 provides guidance on how to fix the issue.',
                      node.src
                    );
                  }
                }
              }
            }
          });
          observer.observe(document.head, { childList: true });
        </script>
      </head>
      <body>
        <script type='module' src='${testFramework}'></script>
      </body>
    </html>`,
};