diff --git a/docs/docs/dev-server/middleware/index.md b/docs/docs/dev-server/middleware/index.md
index 3980c4ee7..d06f7d003 100644
--- a/docs/docs/dev-server/middleware/index.md
+++ b/docs/docs/dev-server/middleware/index.md
@@ -16,9 +16,9 @@ You can use middleware to modify responses to any request from the browser, for
   <summary>Read more</summary>
 
 ```javascript
-const proxy = require('koa-proxies');
+import proxy from 'koa-proxies';
 
-module.exports = {
+export default {
   port: 9000,
   middlewares: [
     proxy('/api', {
@@ -40,7 +40,7 @@ You can rewrite certain file requests using a simple middleware. This can be use
 Serve `/index.html` from `/src/index.html`:
 
 ```javascript
-module.exports = {
+export default {
   middlewares: [
     function rewriteIndex(context, next) {
       if (context.url === '/' || context.url === '/index.html') {
diff --git a/docs/docs/dev-server/plugins/esbuild.md b/docs/docs/dev-server/plugins/esbuild.md
index f7cde880d..9e23c9df5 100644
--- a/docs/docs/dev-server/plugins/esbuild.md
+++ b/docs/docs/dev-server/plugins/esbuild.md
@@ -21,9 +21,9 @@ npm i -D @web/dev-server-esbuild
 Create a configuration file:
 
 ```js
-const { esbuildPlugin } = require('@web/dev-server-esbuild');
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 
-module.exports = {
+export default {
   plugins: [esbuildPlugin({ ts: true })],
 };
 ```
diff --git a/docs/docs/dev-server/plugins/examples.md b/docs/docs/dev-server/plugins/examples.md
index 04d6c7998..f6b2e04e2 100644
--- a/docs/docs/dev-server/plugins/examples.md
+++ b/docs/docs/dev-server/plugins/examples.md
@@ -51,9 +51,12 @@ console.log(`The current version is: ${version}`);
 Add a plugin to serve the contents of this environment:
 
 ```js
-const packageJson = require('./package.json');
+import fs from 'fs';
+import path from 'path';
 
-module.exports = {
+const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+
+export default {
   plugins: [
     {
       name: 'env-vars',
@@ -80,12 +83,12 @@ Another approach is to replace constants or patterns in your code. We don't reco
 You can use the [@rollup/plugin-replace](https://www.npmjs.com/package/@rollup/plugin-replace) for replacing environment variables in your code. Make sure to add an `include` pattern to avoid processing files unnecessarily.
 
 ```js
-const rollupReplace = require('@rollup/plugin-replace');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupReplace from '@rollup/plugin-replace';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const replace = fromRollup(rollupReplace);
 
-module.exports = {
+export default {
   plugins: [replace({ include: ['src/**/*.js'], __environment__: '"development"' })],
 };
 ```
@@ -100,7 +103,7 @@ Es modules are immutable, you cannot mock or stub them at runtime in the browser
 <summary>View example</summary>
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'stub-package',
@@ -133,12 +136,12 @@ Note that the dev server and test runner already includes `esbuild` for compilin
 <summary>View example</summary>
 
 ```js
-const rollupBabel = require('@rollup/plugin-babel');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupBabel from '@rollup/plugin-babel';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const babel = fromRollup(rollupBabel);
 
-module.exports = {
+export default {
   plugins: [babel({ include: ['src/**/*.js'], plugins: ['babel-plugin-foo'] })],
 };
 ```
@@ -159,12 +162,12 @@ To import JSON files you can use [@rollup/plugin-json](https://www.npmjs.com/pac
 In addition to installing the rollup plugin, we need to tell the dev server to serve json files as js modules:
 
 ```js
-const rollupJson = require('@rollup/plugin-json');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupJson from '@rollup/plugin-json';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const json = fromRollup(rollupJson);
 
-module.exports = {
+export default {
   // tell the server to serve json files as js
   mimeTypes: {
     '**/*.json': 'js',
@@ -187,12 +190,12 @@ There are a lot of ways to import CSS. For this example, we have tested two roll
 
 ```js
 /* eslint-disable */
-const rollupPostcss = require('rollup-plugin-postcss');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupPostcss from 'rollup-plugin-postcss';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const postcss = fromRollup(rollupPostcss);
 
-module.exports = {
+export default {
   // in a monorepo you need to adjust the rootdir of the web server
   // postcss injects a module which needs to be reachable from the browser
   // rootDir: '../..',
@@ -214,12 +217,12 @@ If you're using `lit-element`, you can use [rollup-plugin-lit-css](https://www.n
 
 ```js
 /* eslint-disable */
-const rollupLitcss = require('rollup-plugin-lit-css');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupLitcss from 'rollup-plugin-lit-css';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const litcss = fromRollup(rollupLitcss);
 
-module.exports = {
+export default {
   // tell the server to serve css files as js
   mimeTypes: {
     '**/*.css': 'js',
@@ -242,12 +245,12 @@ Make sure not to use the `limit` option, as this causes the plugin to emit files
 
 ```js
 /* eslint-disable */
-const rollupUrl = require('rollup-plugin-url');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupUrl from 'rollup-plugin-url';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const url = fromRollup(rollupUrl);
 
-module.exports = {
+export default {
   // tell the server to serve your assets files as js
   mimeTypes: {
     './assets/**/*': 'js',
diff --git a/docs/docs/dev-server/plugins/index.md b/docs/docs/dev-server/plugins/index.md
index ffb6cd0e9..44d3f0924 100644
--- a/docs/docs/dev-server/plugins/index.md
+++ b/docs/docs/dev-server/plugins/index.md
@@ -17,9 +17,9 @@ A plugin is just an object that you add to the `plugins` array in your configura
 In your `web-dev-server.config.js` or `web-test-runner.config.js`:
 
 ```js
-const awesomePlugin = require('awesome-plugin');
+import awesomePlugin from 'awesome-plugin';
 
-module.exports = {
+export default {
   plugins: [
     // use a plugin
     awesomePlugin({ someOption: 'someProperty' }),
diff --git a/docs/docs/dev-server/plugins/legacy.md b/docs/docs/dev-server/plugins/legacy.md
index 2ac2b263b..8cc328109 100644
--- a/docs/docs/dev-server/plugins/legacy.md
+++ b/docs/docs/dev-server/plugins/legacy.md
@@ -17,9 +17,9 @@ npm i --save-dev @web/dev-server-legacy
 Add the plugin to your config:
 
 ```js
-const { legacyPlugin } = require('@web/dev-server-legacy');
+import { legacyPlugin } from '@web/dev-server-legacy';
 
-module.exports = {
+export default {
   plugins: [legacyPlugin()],
 };
 ```
diff --git a/docs/docs/dev-server/plugins/rollup.md b/docs/docs/dev-server/plugins/rollup.md
index 6e7f10f29..531ba3b21 100644
--- a/docs/docs/dev-server/plugins/rollup.md
+++ b/docs/docs/dev-server/plugins/rollup.md
@@ -23,12 +23,12 @@ npm i --save-dev @web/dev-server-rollup
 Import the rollup plugin and the `fromRollup` function in your configuration file. Then, wrap the rollup plugin with the adapter function:
 
 ```js
-const rollupReplace = require('@rollup/plugin-replace');
-const { fromRollup } = require('@web/dev-server-rollup');
+import rollupReplace from '@rollup/plugin-replace';
+import { fromRollup } from '@web/dev-server-rollup';
 
 const replace = fromRollup(rollupReplace);
 
-module.exports = {
+export default {
   plugins: [replace({ include: ['src/**/*.js'], __environment__: '"development"' })],
 };
 ```
@@ -42,10 +42,10 @@ Some rollup plugins do expensive operations. During development, this matters a
 The rollup build process assumes that any imported files are meant to be compiled to JS, web dev server serves many different kinds of files to the browser. If you are transforming a non-standard filetype to JS, for example .json files, you need to instruct the server to handle it as a JS file:
 
 ```js
-const json = require('@rollup/plugin-json');
-const { rollupAdapter } = require('@web/dev-server-rollup');
+import json from '@rollup/plugin-json';
+import { rollupAdapter } from '@web/dev-server-rollup';
 
-module.exports = {
+export default {
   mimeTypes: {
     // serve all json files as js
     '**/*.json': 'js',
diff --git a/docs/docs/dev-server/plugins/writing-plugins.md b/docs/docs/dev-server/plugins/writing-plugins.md
index 196015349..9dc31d59d 100644
--- a/docs/docs/dev-server/plugins/writing-plugins.md
+++ b/docs/docs/dev-server/plugins/writing-plugins.md
@@ -14,9 +14,9 @@ A plugin is just an object that you add to the `plugins` array in your configura
 In your `web-dev-server.config.js` or `web-test-runner.config.js`:
 
 ```js
-const awesomePlugin = require('awesome-plugin');
+import awesomePlugin from 'awesome-plugin';
 
-module.exports = {
+export default {
   plugins: [
     // use a plugin
     awesomePlugin({ someOption: 'someProperty' }),
@@ -99,7 +99,7 @@ Serve an auto generated `index.html`:
 ```js
 const indexHTML = generateIndexHTML();
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -118,7 +118,7 @@ Serve a virtual module:
 ```js
 const indexHTML = generateIndexHTML();
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -135,7 +135,7 @@ module.exports = {
 The file extension is used to infer the mime type to respond with. If you are using a non-standard file extension you need to use the `type` property to set it explicitly:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -163,7 +163,7 @@ The dev server guesses the MIME type based on the file extension. When serving v
 The returned MIME type can be a file extension, this will be used to set the corresponding default MIME type. For example `js` resolves to `application/javascript` and `css` to `text/css`.
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -190,7 +190,7 @@ module.exports = {
 You can use a mime type shorthand, such as `js` or `css`. Koa will resolve this to the full mimetype. It is also possible to set the full mime type directly:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -220,7 +220,7 @@ In a web server, the response body is not always a string, but it can be a binar
 Rewrite the base path of your application for local development;
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -238,7 +238,7 @@ module.exports = {
 Inject a script to set global variables during local development:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -259,9 +259,11 @@ module.exports = {
 Inject environment variables into a JS module:
 
 ```js
-const packageJson = require('./package.json');
+import fs from 'fs';
 
-module.exports = {
+const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -278,9 +280,9 @@ module.exports = {
 Transform markdown to HTML:
 
 ```js
-const markdownToHTML = require('markdown-to-html-library');
+import { markdownToHTML } from 'markdown-to-html-library';
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -308,7 +310,7 @@ module.exports = {
 Polyfill CSS modules in JS:
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -348,7 +350,7 @@ The dev server already resolves module imports when the `--node-resolve` flag is
 The hook receives the import string and should return the string to replace it with. This should be a browser-compatible path, not a file path.
 
 ```js
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -394,7 +396,7 @@ function myFancyPlugin() {
   };
 }
 
-module.exports = {
+export default {
   plugins: [myFancyPlugin()],
 };
 ```
@@ -402,9 +404,9 @@ module.exports = {
 Boot up another server for proxying in serverStart:
 
 ```js
-const proxy = require('koa-proxies');
+import proxy from 'koa-proxies';
 
-module.exports = {
+export default {
   plugins: [
     {
       name: 'my-plugin',
@@ -443,7 +445,7 @@ function myFancyPlugin() {
   };
 }
 
-module.exports = {
+export default {
   plugins: [myFancyPlugin()],
 };
 ```
diff --git a/docs/docs/test-runner/browsers/browserstack.md b/docs/docs/test-runner/browsers/browserstack.md
index b6a928383..bc62055d2 100644
--- a/docs/docs/test-runner/browsers/browserstack.md
+++ b/docs/docs/test-runner/browsers/browserstack.md
@@ -13,7 +13,7 @@ For modern browsers, we recommend using other browser launchers, as they are a l
 ## Usage
 
 ```js
-const { browserstackLauncher } = require('@web/test-runner-browserstack');
+import { browserstackLauncher } from '@web/test-runner-browserstack';
 
 const sharedCapabilities = {
   // it's recommended to store user and key as environment variables
@@ -28,7 +28,7 @@ const sharedCapabilities = {
   build: `build ${process.env.GITHUB_RUN_NUMBER || 'unknown'}`,
 };
 
-module.exports = {
+export default {
   browsers: [
     browserstackLauncher({
       capabilities: {
diff --git a/docs/docs/test-runner/browsers/chrome.md b/docs/docs/test-runner/browsers/chrome.md
index df1ecc451..8c03ac181 100644
--- a/docs/docs/test-runner/browsers/chrome.md
+++ b/docs/docs/test-runner/browsers/chrome.md
@@ -23,9 +23,9 @@ For other projects you can install the browser launcher by running:
 And included in your config:
 
 ```js
-const { chromeLauncher } = require('@web/test-runner-chrome');
+import { chromeLauncher } from '@web/test-runner-chrome';
 
-module.exports = {
+export default {
   browsers: [chromeLauncher()],
 };
 ```
@@ -37,9 +37,9 @@ If you want to customize the puppeteer launcher options, you can add the browser
 You can find all possible launch options in the [official documentation](https://github.com/microsoft/puppeteer/blob/master/docs/api.md#browsertypelaunchoptions)
 
 ```js
-const { chromeLauncher } = require('@web/test-runner-chrome');
+import { chromeLauncher } from '@web/test-runner-chrome';
 
-module.exports = {
+export default {
   browsers: [
     chromeLauncher({
       launchOptions: {
diff --git a/docs/docs/test-runner/browsers/index.md b/docs/docs/test-runner/browsers/index.md
index 506085dee..35519baf5 100644
--- a/docs/docs/test-runner/browsers/index.md
+++ b/docs/docs/test-runner/browsers/index.md
@@ -44,13 +44,13 @@ You configure which browser launchers to run from your config file. You can use
 
 ```js
 // import the browser launcher you want to use, chromeLauncher is the default
-const { chromeLauncher } = require('@web/test-runner');
-// const { playwrightLauncher } = require('@web/test-runner-playwright');
-// const { puppeteerLauncher } = require('@web/test-runner-puppeteer');
-// const { seleniumLauncher } = require('@web/test-runner-selenium');
-// const { browserstackLauncher } = require('@web/test-runner-browserstack');
+import { chromeLauncher } from '@web/test-runner';
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+// import { puppeteerLauncher } from '@web/test-runner-puppeteer';
+// import { seleniumLauncher } from '@web/test-runner-selenium';
+// import { browserstackLauncher } from '@web/test-runner-browserstack';
 
-module.exports = {
+export default {
   browsers: [chromeLauncher({ launchOptions: { args: ['--no-sandbox'] } })],
 };
 ```
diff --git a/docs/docs/test-runner/browsers/playwright.md b/docs/docs/test-runner/browsers/playwright.md
index 8253d4431..f035d2e63 100644
--- a/docs/docs/test-runner/browsers/playwright.md
+++ b/docs/docs/test-runner/browsers/playwright.md
@@ -27,9 +27,9 @@ If you want to customize the playwright launcher options, you can add the browse
 You can find all possible launch options in the [official documentation](https://github.com/microsoft/playwright/blob/master/docs/api.md#browsertypelaunchoptions)
 
 ```js
-const { playwrightLauncher } = require('@web/test-runner-playwright');
+import { playwrightLauncher } from '@web/test-runner-playwright';
 
-module.exports = {
+export default {
   browwsers: [
     playwrightLauncher({
       // product can be chromium, webkit or firefox
@@ -49,9 +49,9 @@ module.exports = {
 For each browser, you can add a separate browser launcher
 
 ```js
-const { playwrightLauncher } = require('@web/test-runner-playwright');
+import { playwrightLauncher } from '@web/test-runner-playwright';
 
-module.exports = {
+export default {
   browwsers: [
     playwrightLauncher({ product: 'chromium' }),
     playwrightLauncher({ product: 'firefox' }),
diff --git a/docs/docs/test-runner/browsers/puppeteer.md b/docs/docs/test-runner/browsers/puppeteer.md
index b4f2b9fac..040b20d07 100644
--- a/docs/docs/test-runner/browsers/puppeteer.md
+++ b/docs/docs/test-runner/browsers/puppeteer.md
@@ -27,9 +27,9 @@ If you want to customize the puppeteer launcher options, you can add the browser
 You can find all possible launch options in the [official documentation](https://github.com/microsoft/puppeteer/blob/master/docs/api.md#browsertypelaunchoptions)
 
 ```js
-const { puppeteerLauncher } = require('@web/test-runner-puppeteer');
+import { puppeteerLauncher } from '@web/test-runner-puppeteer';
 
-module.exports = {
+export default {
   browwsers: [
     puppeteerLauncher({
       launchOptions: {
diff --git a/docs/docs/test-runner/browsers/selenium.md b/docs/docs/test-runner/browsers/selenium.md
index 2f81d75ef..a52d4bf7b 100644
--- a/docs/docs/test-runner/browsers/selenium.md
+++ b/docs/docs/test-runner/browsers/selenium.md
@@ -17,12 +17,12 @@ For testing on modern browsers, we don't recommend using Selenium, as it does no
 2. Add the selenium launcher to your test runner config, specifying the browser builder with the necessary options:
 
 ```js
-const { seleniumLauncher } = require('@web/test-runner-selenium');
-const { Builder } = require('selenium-webdriver');
+import { seleniumLauncher } from '@web/test-runner-selenium';
+import webdriver from 'selenium-webdriver';
 
 module.exports = {
   browsers: seleniumLauncher({
-    driverBuilder: new Builder()
+    driverBuilder: new webdriver.Builder()
       .forBrowser('chrome')
       .setChromeOptions(new ChromeOptions().headless())
       .usingServer('http://localhost:4444/wd/hub'),
diff --git a/docs/docs/test-runner/cli-and-configuration/index.md b/docs/docs/test-runner/cli-and-configuration/index.md
index b5b153ab5..c843246ae 100644
--- a/docs/docs/test-runner/cli-and-configuration/index.md
+++ b/docs/docs/test-runner/cli-and-configuration/index.md
@@ -44,8 +44,24 @@ Web test runner looks for a configuration file in the current working directory
 
 The file extension can be `.js`, `.cjs` or `.mjs`. A `.js` file will be loaded as an es module or common js module based on your version of node, and the package type of your project.
 
+We recommend writing the configuration using [node js es module](https://nodejs.org/api/esm.html) syntax, and using the `.mjs` just to make sure your config is always loaded correctly. All the examples in our documentation use es module syntax, but the config can be written as common js as well.
+
 <details>
-<summary>View example</summary>
+<summary>View examples</summary>
+
+A config written as es module:
+
+```js
+export default {
+  concurrency: 10,
+  nodeResolve: true,
+  watch: true,
+  // in a monorepo you need to set set the root dir to resolve modules
+  rootDir: '../../',
+};
+```
+
+A config written as a commonjs module:
 
 ```js
 module.exports = {
diff --git a/docs/docs/test-runner/commands/index.md b/docs/docs/test-runner/commands/index.md
index 69b531057..46c056a52 100644
--- a/docs/docs/test-runner/commands/index.md
+++ b/docs/docs/test-runner/commands/index.md
@@ -123,7 +123,7 @@ By returning a non-null or undefined value from this function, the test runner w
 <summary>View example</summary>
 
 ```js
-const fs = require('fs');
+import fs from 'fs';
 
 function myPlugin() {
   return {
@@ -141,7 +141,7 @@ function myPlugin() {
 }
 
 // your web-test-runner.config.js
-module.exports = {
+export default {
   plugins: [myPlugin()],
 };
 ```
diff --git a/docs/docs/test-runner/reporters/index.md b/docs/docs/test-runner/reporters/index.md
index 34624f0f7..6ffa77f33 100644
--- a/docs/docs/test-runner/reporters/index.md
+++ b/docs/docs/test-runner/reporters/index.md
@@ -10,10 +10,10 @@ You can customize the test reporters using the `reporters` option.
 
 ```js
 // import the browser launcher you want to use
-const { defaultReporter } = require('@web/test-runner');
-const { myReporter } = require('my-reporter');
+import { defaultReporter } from '@web/test-runner';
+import { myReporter } from 'my-reporter';
 
-module.exports = {
+export default {
   reporters: [
     // use the default reporter only for reporting test progress
     defaultReporter({ reportTestResults: false, reportTestProgress: true }),
diff --git a/docs/docs/test-runner/writing-tests/code-coverage.md b/docs/docs/test-runner/writing-tests/code-coverage.md
index d4276b707..48055e3ef 100644
--- a/docs/docs/test-runner/writing-tests/code-coverage.md
+++ b/docs/docs/test-runner/writing-tests/code-coverage.md
@@ -43,12 +43,12 @@ If you choose to use the babel plugin, you can off native instrumentation by set
 <summary>View example</summary>
 
 ```js
-const { fromRollup } = require('@web/dev-server-rollup');
-const { babel: rollupBabel } = require('@rollup/plugin-babel');
+import { fromRollup } from '@web/dev-server-rollup';
+import rollupBabel from '@rollup/plugin-babel';
 
 const babel = fromRollup(rollupBabel);
 
-module.exports = {
+export default {
   coverage: true,
   coverageConfig: {
     nativeInstrumentation: false,
@@ -58,7 +58,7 @@ module.exports = {
       // avoid running babel on code that doesn't need it
       include: ['src/**/*.js'],
       babelHelpers: 'bundled',
-      plugins: [require.resolve('babel-plugin-istanbul')],
+      plugins: ['babel-plugin-istanbul'],
     }),
   ],
 };
diff --git a/packages/test-runner/legacy.config.js b/packages/test-runner/legacy.config.mjs
similarity index 61%
rename from packages/test-runner/legacy.config.js
rename to packages/test-runner/legacy.config.mjs
index f9ab9aa42..db5d5ff81 100644
--- a/packages/test-runner/legacy.config.js
+++ b/packages/test-runner/legacy.config.mjs
@@ -1,7 +1,6 @@
-/* eslint-disable */
-const { legacyPlugin } = require('@web/dev-server-legacy');
+import { legacyPlugin } from '@web/dev-server-legacy';
 
-module.exports = {
+export default {
   middleware: [
     (ctx, next) => {
       ctx.headers['user-agent'] = '<removed user agent>';
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
deleted file mode 100644
index 47856fb16..000000000
--- a/web-test-runner.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable */
-const { esbuildPlugin } = require('@web/dev-server-esbuild');
-
-module.exports = {
-  nodeResolve: true,
-  plugins: [esbuildPlugin({ ts: true })],
-};
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
new file mode 100644
index 000000000..4ffdc2f05
--- /dev/null
+++ b/web-test-runner.config.mjs
@@ -0,0 +1,6 @@
+import { esbuildPlugin } from '@web/dev-server-esbuild';
+
+export default {
+  nodeResolve: true,
+  plugins: [esbuildPlugin({ ts: true })],
+};