Run tests with real ECAMAScript modules

Compile to ECMAScript module syntax for tests.

- Replace nyt with c8

- Replace optimal-select with @medv/finder

- Replace custom babel-register with babel-register-esm

Author: tilgovi

.gitignore

@@ -1,7 +1,6 @@
 *.d.ts
 !/packages/**/src/**/*.d.ts
 *.d.ts.map
-.nyc_output
 coverage
 docs
 node_modules

.mocharc.js

@@ -23,7 +23,8 @@
 module.exports = {
   extension: ['.ts'],
   ignore: ['node_modules'],
-  require: ['./babel-register.js', 'global-jsdom/register'],
+  loader: 'babel-register-esm',
+  require: ['global-jsdom/register'],
   timeout: 5000,
   watchFiles: [
     './test/**/*.ts',

babel-register.js

@@ -32,8 +32,8 @@ module.exports = (api) => {
     // Use minimal syntax fixes where possible
     // Note: This setting may become the default in Babel 8.
     bugfixes: true,
-    // Transform module syntax if necessary.
-    modules: TEST ? 'commonjs' : false,
+    // Do not transform module syntax.
+    modules: false,
   };
 
   // Options for the @babel/typescript preset.

babel.config.js

@@ -19,14 +19,15 @@
     "build:js": "lerna exec --parallel -- babel -d lib -s -x .ts --env-name production --root-mode upward src",
     "build:misc": "lerna exec --parallel -- cp ../../DISCLAIMER-WIP ../../LICENSE ../../NOTICE ../../README.md .",
     "build:types": "tsc --build",
-    "clean": "tsc --build --clean && lerna exec -- rimraf DISCLAIMER-WIP LICENSE NOTICE README.md lib && rimraf .nyc_output coverage docs web/dist *.tsbuildinfo",
+    "clean": "tsc --build --clean && lerna exec -- rimraf DISCLAIMER-WIP LICENSE NOTICE README.md coverage docs lib web/dist",
     "docs": "tsc --build && typedoc",
     "lint": "eslint .",
     "prepublishOnly": "yarn run build",
     "publish": "lerna publish",
     "publish:ci": "yarn run publish --canary --exact --force-publish '*' --no-verify-access --yes minor",
     "start": "yarn run web:server",
-    "test": "cross-env BABEL_ENV=test nyc mocha packages/**/*.test.ts",
+    "test": "cross-env BABEL_ENV=test c8 -r html -r text mocha packages/**/*.test.ts",
+    "test:watch": "cross-env BABEL_ENV=test mocha -p -w packages/**/*.test.ts",
     "validate": "cross-env BABEL_ENV=test mocha test/**/*.test.ts",
     "web:build": "webpack --config=web/webpack.config.js --mode development",
     "web:server": "webpack-dev-server --config=web/webpack.config.js --hot --mode development"
@@ -38,7 +39,6 @@
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-typescript": "^7.13.0",
-    "@babel/register": "^7.13.14",
     "@types/mocha": "^9.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/resolve": "^1.17.0",
@@ -49,6 +49,8 @@
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-preserve-comment-header": "^1.0.1",
+    "babel-register-esm": "^1.2.1",
+    "c8": "^7.10.0",
     "concurrently": "^5.3.0",
     "cross-env": "^6.0.3",
     "eslint": "^7.5.0",
@@ -65,7 +67,6 @@
     "lint-staged": "^10.0.2",
     "mocha": "^9.1.3",
     "node-fetch": "^2.5.0",
-    "nyc": "^15.0.0",
     "prettier": "^2.0.5",
     "resolve": "^1.15.0",
     "rimraf": "^3.0.0",

nyc.config.js

@@ -16,7 +16,7 @@
   "dependencies": {
     "@apache-annotator/selector": "^0.2.0",
     "@babel/runtime-corejs3": "^7.13.10",
-    "optimal-select": "^4.0.1"
+    "@medv/finder": "^2.1.0"
   },
   "engines": {
     "node": "^12.20 || ^14.15 || ^15.4 || ^16.0"

package.json

@@ -20,7 +20,7 @@
  * under the License.
  */
 
-import optimalSelect from 'optimal-select';
+import { finder } from '@medv/finder';
 import type { CssSelector, Matcher } from '@apache-annotator/selector';
 import { ownerDocument } from './owner-document.js';
 import { toRange } from './to-range.js';
@@ -112,9 +112,9 @@ export function createCssSelectorMatcher(
  */
 export async function describeCss(
   element: HTMLElement,
-  scope: Node = element.ownerDocument,
+  scope: Element = element.ownerDocument.documentElement,
 ): Promise<CssSelector> {
-  const selector = optimalSelect(element, { root: scope });
+  const selector = finder(element, { root: scope });
   return {
     type: 'CssSelector',
     value: selector,

packages/dom/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/dom/src/css.ts

@@ -1,18 +1,19 @@
 {
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
     "composite": true,
     "declaration": true,
     "declarationMap": true,
     "downlevelIteration": true,
     "emitDeclarationOnly": true,
-    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "lib": [
       "dom",
       "dom.iterable",
       "es2020"
     ],
+    "module": "es2020",
     "moduleResolution": "node",
     "noPropertyAccessFromIndexSignature": true,
     "skipLibCheck": true,