WIP (this commit will be re-written): update use native Node ESM for server code, update config files to specifically use .cjs (those tools don't support Node ESM files yet), use a single eslintrc file, all test code uses ESM import/export syntax instead of require (WIP)

test/config/jest-playwright.setup-tests.js

@@ -1,4 +1,4 @@
-/* global browserName page */
+/* global browserName page jestPlaywright */
 const { configureToMatchImageSnapshot } = require('jest-image-snapshot');
 
 // Lifecycle Hooks
@@ -41,7 +41,7 @@ beforeAll(async () => {
 });
 
 beforeEach(async () => {
-  await global.jestPlaywright.resetPage();
+  await jestPlaywright.resetPage();
 
   // Goto URL ()
   // https://playwright.dev/#path=docs%2Fapi.md&q=pagegotourl-options

test/config/jest.setup-tests.js

@@ -28,14 +28,14 @@ beforeEach(async () => {
     'google_tag_data',
     'marked',
     'Prism',
-  ].forEach(prop => {
-    if (global[prop]) {
-      delete global[prop];
+  ].forEach((prop) => {
+    if (globalThis[prop]) {
+      delete globalThis[prop];
     }
   });
 
   // Remove attributes
-  [...rootElm.attributes].forEach(attr => rootElm.removeAttribute(attr.name));
+  [...rootElm.attributes].forEach((attr) => rootElm.removeAttribute(attr.name));
 
   // Restore base elements
   rootElm.innerHTML = '<html><head></head><body></body></html>';

test/config/jest.setup.cjs

@@ -0,0 +1,9 @@
+// This has to be a CommonJS file because Jest currently imports it using
+// `require()` instead of `import` (to be continued)...
+
+module.exports = async () => {
+  // ...(continued) but we can use import in here to transition back into ESM land.
+  const server = (await import('./server')).default;
+
+  await server.startAsync();
+};

test/config/jest.setup.js

@@ -1,5 +0,0 @@
-const server = require('./server.js');
-
-module.exports = async () => {
-  await server.startAsync();
-};

test/config/jest.teardown.cjs

@@ -0,0 +1,4 @@
+module.exports = async () => {
+  const server = (await import('./server')).default;
+  server.stop();
+};

test/config/jest.teardown.js

@@ -1,5 +0,0 @@
-const server = require('./server.js');
-
-module.exports = async () => {
-  server.stop();
-};

test/config/server.js

@@ -1,7 +1,10 @@
-const browserSync = require('browser-sync').create();
-const path = require('path');
+import path from 'path';
+import browserSyncModule from 'browser-sync';
+import esMain from 'es-main';
 
+const browserSync = browserSyncModule.create();
 const hasStartArg = process.argv.includes('--start');
+const dirname = path.dirname(import.meta.url.replace('file://', ''));
 
 const serverConfig = {
   host: '127.0.0.1',
@@ -14,7 +17,7 @@ function startServer(options = {}, cb = Function.prototype) {
     middleware: [
       {
         route: '/_blank.html',
-        handle: function(req, res, next) {
+        handle: function (req, res, next) {
           res.setHeader('Content-Type', 'text/html');
           res.end('');
           next();
@@ -31,18 +34,18 @@ function startServer(options = {}, cb = Function.prototype) {
       },
     ],
     server: {
-      baseDir: path.resolve(__dirname, '../'),
+      baseDir: path.resolve(dirname, '../'),
       routes: {
-        '/docs': path.resolve(__dirname, '../../docs'),
+        '/docs': path.resolve(dirname, '../../docs'),
         '/docs/changelog.md': './CHANGELOG.md',
-        '/lib': path.resolve(__dirname, '../../lib'),
-        '/node_modules': path.resolve(__dirname, '../../node_modules'),
+        '/lib': path.resolve(dirname, '../../lib'),
+        '/node_modules': path.resolve(dirname, '../../node_modules'),
       },
     },
     snippetOptions: {
       rule: {
         match: /<\/body>/i,
-        fn: function(snippet, match) {
+        fn: function (snippet, match) {
           // Override changelog alias to load local changelog (see routes)
           const injectJS = `
             <script>
@@ -77,7 +80,7 @@ function startServer(options = {}, cb = Function.prototype) {
 }
 
 async function startServerAsync() {
-  await new Promise((resolve, reject) => {
+  await new Promise((resolve) => {
     startServer({}, () => {
       console.log('\n');
       resolve();
@@ -89,6 +92,8 @@ function stopServer() {
   browserSync.exit();
 }
 
+const isTopLevelModule = esMain(import.meta);
+
 // Allow starting the test server from the CLI. Useful for viewing test content
 // like fixtures (/index.html)) and local docs site (/docs) used for testing.
 if (hasStartArg) {
@@ -99,11 +104,11 @@ if (hasStartArg) {
   });
 }
 // Display friendly message about manually starting a server instance
-else if (require.main === module) {
-  console.info('Use --start argument to manually start server instance');
+else if (isTopLevelModule) {
+  console.info('Use the --start argument to manually start server instance');
 }
 
-module.exports = {
+export default {
   globals: {
     get BLANK_URL() {
       return `${this.TEST_HOST}/_blank.html`;