fix(webdriverjs): fix default commonJs export (#927)

* fix(webdriverjs): fix default commonJs export

* fix react building on test

* fix now?

* revert example update

* support 4.7.3

.github/workflows/tests.yml

@@ -41,7 +41,7 @@ jobs:
         working-directory: packages/puppeteer
       - run: npm run build --workspace=packages/puppeteer
       - run: npm run coverage --workspace=packages/puppeteer
-      - run: npm run test:esm --workspace=packages/puppeteer
+      - run: npm run test:export --workspace=packages/puppeteer
 
   cli:
     strategy:
@@ -83,7 +83,7 @@ jobs:
         working-directory: packages/webdriverjs
       - run: npm run build --workspace=packages/webdriverjs
       - run: npm run coverage --workspace=packages/webdriverjs
-      - run: npm run test:esm --workspace=packages/webdriverjs
+      - run: npm run test:export --workspace=packages/webdriverjs
 
   webdriverio:
     strategy:
@@ -105,7 +105,7 @@ jobs:
         working-directory: packages/webdriverio
       - run: npm run build --workspace=packages/webdriverio
       - run: npm run coverage --workspace=packages/webdriverio
-      - run: npm run test:esm --workspace=packages/webdriverio
+      - run: npm run test:export --workspace=packages/webdriverio
 
   reporter_earl:
     strategy:
@@ -123,7 +123,7 @@ jobs:
       - run: npm ci
       - run: npm run build --workspace=packages/reporter-earl
       - run: npm run test --workspace=packages/reporter-earl
-      - run: npm run test:esm --workspace=packages/reporter-earl
+      - run: npm run test:export --workspace=packages/reporter-earl
 
   react:
     strategy:
@@ -139,9 +139,12 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: 'npm'
       - run: npm ci
-      - run: npm run build --workspace=packages/react
       - run: npm run test --workspace=packages/react
-      - run: npm run test:esm --workspace=packages/react
+      # the tests builds the project using tsc and relies on `cache.ts` to be
+      # built and be it's own file. however we don't want that for the export
+      # test so we need to rebuild using tsup
+      - run: npm run build --workspace=packages/react
+      - run: npm run test:export --workspace=packages/react
 
   playwright:
     strategy:
@@ -160,7 +163,7 @@ jobs:
       - run: npx playwright install --with-deps
       - run: npm run build --workspace=packages/playwright
       - run: npm run coverage --workspace=packages/playwright
-      - run: npm run test:esm --workspace=packages/playwright
+      - run: npm run test:export --workspace=packages/playwright
 
   wdio_globals_test:
     strategy:

packages/playwright/package.json

@@ -43,7 +43,9 @@
     "prebuild": "rimraf dist",
     "build": "tsup src/index.ts --dts --format esm,cjs",
     "test": "mocha --timeout 60000 -r ts-node/register 'test/**.spec.ts'",
+    "test:export": "npm run test:esm && npm run test:commonjs",
     "test:esm": "node test/esmTest.mjs",
+    "test:commonjs": "node test/commonjsTest.js",
     "coverage": "nyc npm run test",
     "prepare": "npx playwright install && npm run build"
   },

packages/playwright/test/commonjsTest.js

@@ -0,0 +1,11 @@
+// ensure backwards compatibility of commonJs format
+const defaultExport = require('../dist/index.js').default;
+const { AxeBuilder } = require('../dist/index.js');
+const assert = require('assert');
+
+assert(typeof defaultExport === 'function', 'default export is not a function');
+assert(typeof AxeBuilder === 'function', 'named export is not a function');
+assert(
+  defaultExport === AxeBuilder,
+  'default and named export are not the same'
+);

packages/playwright/test/esmTest.mjs

@@ -1,5 +1,8 @@
+// ensure compatibility of ESM format
 import defaultExport from '../dist/index.mjs';
+import { AxeBuilder } from '../dist/index.mjs';
 import assert from 'assert';
 
-const exportIsFunction = typeof defaultExport === 'function';
-assert(exportIsFunction, 'export is not a function');
+assert(typeof defaultExport === 'function', 'default export is not a function');
+assert(typeof AxeBuilder === 'function', 'named export is not a function')
+assert(defaultExport === AxeBuilder, 'default and named export are not the same');

packages/puppeteer/package.json

@@ -25,7 +25,9 @@
   "scripts": {
     "build": "tsup src/index.ts --dts --format esm,cjs",
     "test": "mocha --timeout 60000 -r ts-node/register 'test/**.spec.ts'",
+    "test:export": "npm run test:esm && npm run test:commonjs",
     "test:esm": "node test/esmTest.mjs",
+    "test:commonjs": "node test/commonjsTest.js",
     "coverage": "nyc npm run test",
     "prepublishOnly": "npm run build"
   },

packages/puppeteer/test/commonjsTest.js

@@ -0,0 +1,11 @@
+// ensure backwards compatibility of commonJs format
+const defaultExport = require('../dist/index.js').default;
+const { AxePuppeteer } = require('../dist/index.js');
+const assert = require('assert');
+
+assert(typeof defaultExport === 'function', 'default export is not a function');
+assert(typeof AxePuppeteer === 'function', 'named export is not a function');
+assert(
+  defaultExport === AxePuppeteer,
+  'default and named export are not the same'
+);

packages/puppeteer/test/esmTest.mjs

@@ -1,14 +1,15 @@
-import defaultExport, { AxePuppeteer } from '../dist/index.mjs';
+// ensure compatibility of ESM format
+import defaultExport from '../dist/index.mjs';
+import { AxePuppeteer } from '../dist/index.mjs';
 import assert from 'assert';
 import puppeteer from 'puppeteer';
 import { fileURLToPath, pathToFileURL } from 'url';
 import { join } from 'path';
 import { fixturesPath } from 'axe-test-fixtures';
 
-const exportIsFunction = typeof defaultExport === 'function';
-const exportIsSame = defaultExport === AxePuppeteer;
-assert(exportIsFunction, 'export is not a function');
-assert(exportIsSame, 'default and named export is not the same');
+assert(typeof defaultExport === 'function', 'default export is not a function');
+assert(typeof AxePuppeteer === 'function', 'named export is not a function')
+assert(defaultExport === AxePuppeteer, 'default and named export are not the same');
 
 const options = {};
 
@@ -30,4 +31,4 @@ async function integrationTest() {
   await page.close();
   await browser.close();
 }
-integrationTest();
+integrationTest();

packages/react/package.json

@@ -28,7 +28,9 @@
     "build": "tsup index.ts --dts --format esm,cjs",
     "prepare": "npm run build",
     "test": "tsc && npm run test:types && jest",
-    "test:esm": "node esmTest.mjs",
+    "test:export": "npm run test:esm && npm run test:commonjs",
+    "test:esm": "node test/esmTest.mjs",
+    "test:commonjs": "node test/commonjsTest.js",
     "test:types": "cd test && tsc"
   },
   "keywords": [

packages/react/test/commonjsTest.js

@@ -0,0 +1,8 @@
+// ensure backwards compatibility of commonJs format
+global.window = {};
+global.document = {};
+
+const defaultExport = require('../dist/index.js');
+const assert = require('assert');
+
+assert(typeof defaultExport === 'function', 'export is not a function');

packages/react/esmTest.mjs → packages/react/test/esmTest.mjs

@@ -1,8 +1,10 @@
+// ensure compatibility of ESM format
+
 // in order to properly set global placeholders for `window` and `document` we have to
 // import a file that does that.
 // Setting them in this file will not work.
-import _ from './setupGlobals.mjs';
-import defaultExport from './dist/index.mjs';
+import './setupGlobals.mjs';
+import defaultExport from '../dist/index.mjs';
 import assert from 'assert';
 
 const exportIsFunction = typeof defaultExport === 'function';

packages/react/test/setupGlobals.mjs

@@ -0,0 +1,2 @@
+global.window = {};
+global.document = {};

packages/reporter-earl/jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
   transform: {
     '\\.(ts|tsx)$': 'ts-jest'
   },
-  testRegex: '/tests/.*\\.(ts|tsx|js)$',
+  testPathDirs: 'tests',
   testPathIgnorePatterns: ['/node_modules/', '/dist/', '/tests/utils.ts'],
   silent: false,
   coverageThreshold: {

packages/reporter-earl/package.json

@@ -15,7 +15,9 @@
   "scripts": {
     "start": "NODE_OPTIONS=--experimental-vm-modules jest --watch --env=jsdom",
     "test": "npm run build && npm run test:unit",
-    "test:esm": "node esmTest.mjs",
+    "test:export": "npm run test:esm && npm run test:commonjs",
+    "test:esm": "node tests/esmTest.mjs",
+    "test:commonjs": "node tests/commonjsTest.js",
     "test:unit": "NODE_OPTIONS=--experimental-vm-modules jest --collectCoverage",
     "build": "tsup src/axeReporterEarl.ts --dts --format esm,cjs",
     "prepublishOnly": "npm run build"

packages/reporter-earl/tests/commonjsTest.js

@@ -0,0 +1,6 @@
+// ensure backwards compatibility of commonJs format
+const defaultExport = require('../dist/axeReporterEarl.js').default;
+const assert = require('assert');
+
+const exportIsFunction = typeof defaultExport === 'function';
+assert(exportIsFunction, 'export is not a function');

packages/reporter-earl/esmTest.mjs → packages/reporter-earl/tests/esmTest.mjs

@@ -1,4 +1,5 @@
-import defaultExport from './dist/axeReporterEarl.mjs';
+// ensure compatibility of ESM format
+import defaultExport from '../dist/axeReporterEarl.mjs';
 import assert from 'assert';
 
 const exportIsFunction = typeof defaultExport === 'function';

packages/webdriverio/package.json

@@ -29,7 +29,9 @@
     "prebuild": "rimraf dist",
     "build": "tsup src/index.ts --dts --format esm,cjs",
     "test": "mocha --timeout 60000 -r ts-node/register 'test/**.spec.ts'",
+    "test:export": "npm run test:esm && npm run test:commonjs",
     "test:esm": "node test/esmTest.mjs",
+    "test:commonjs": "node test/commonjsTest.js",
     "coverage": "nyc npm run test",
     "prepare": "npm run build"
   },

packages/webdriverio/test/commonjsTest.js

@@ -0,0 +1,11 @@
+// ensure backwards compatibility of commonJs format
+const defaultExport = require('../dist/index.js').default;
+const { AxeBuilder } = require('../dist/index.js');
+const assert = require('assert');
+
+assert(typeof defaultExport === 'function', 'default export is not a function');
+assert(typeof AxeBuilder === 'function', 'named export is not a function');
+assert(
+  defaultExport === AxeBuilder,
+  'default and named export are not the same'
+);

packages/webdriverio/test/esmTest.mjs

@@ -1,12 +1,14 @@
 import defaultExport from '../dist/index.mjs';
+import { AxeBuilder } from '../dist/index.mjs';
 import assert from 'assert';
 import * as webdriverio from 'webdriverio';
 import { fileURLToPath, pathToFileURL } from 'url';
 import { join } from 'path';
 import { fixturesPath } from 'axe-test-fixtures';
 
-const exportIsFunction = typeof defaultExport === 'function';
-assert(exportIsFunction, 'export is not a function');
+assert(typeof defaultExport === 'function', 'default export is not a function');
+assert(typeof AxeBuilder === 'function', 'named export is not a function')
+assert(defaultExport === AxeBuilder, 'default and named export are not the same');
 
 async function integrationTest() {
   const path = join(fixturesPath, 'index.html');

packages/webdriverjs/package.json

@@ -49,7 +49,9 @@
     "prebuild": "rimraf dist",
     "build": "tsup src/index.ts --dts --format esm,cjs",
     "test": "mocha --timeout 60000 -r ts-node/register 'test/**.spec.ts'",
+    "test:export": "npm run test:esm && npm run test:commonjs",
     "test:esm": "node test/esmTest.mjs",
+    "test:commonjs": "node test/commonjsTest.js",
     "coverage": "nyc npm run test",
     "prepare": "npm run build"
   },

packages/webdriverjs/src/index.ts

@@ -291,4 +291,11 @@ export default class AxeBuilder {
   }
 }
 
+// ensure backwards compatibility with commonJs default export
+if (typeof module === 'object') {
+  module.exports = AxeBuilder;
+  module.exports.default = AxeBuilder;
+  module.exports.AxeBuilder = AxeBuilder;
+}
+
 export { AxeBuilder };

packages/webdriverjs/test/commonjsTest.js

@@ -0,0 +1,25 @@
+// ensure backwards compatibility of commonJs format
+const implicitDefaultExport = require('../dist/index.js'); // support <4.7.3
+const explicitDefaultExport = require('../dist/index.js').default; // support 4.7.3+
+const { AxeBuilder } = require('../dist/index.js');
+const assert = require('assert');
+
+assert(typeof AxeBuilder === 'function', 'named export is not a function');
+
+assert(
+  typeof implicitDefaultExport === 'function',
+  'implicit default export is not a function'
+);
+assert(
+  implicitDefaultExport === AxeBuilder,
+  'implicit default and named export are not the same'
+);
+
+assert(
+  typeof explicitDefaultExport === 'function',
+  'explicit default export is not a function'
+);
+assert(
+  explicitDefaultExport === AxeBuilder,
+  'explicit default and named export are not the same'
+);

packages/webdriverjs/test/esmTest.mjs

@@ -1,5 +1,8 @@
+// ensure compatibility of ESM format
 import defaultExport from '../dist/index.mjs';
+import { AxeBuilder } from '../dist/index.mjs';
 import assert from 'assert';
 
-const exportIsFunction = typeof defaultExport === 'function';
-assert(exportIsFunction, 'export is not a function');
+assert(typeof defaultExport === 'function', 'default export is not a function');
+assert(typeof AxeBuilder === 'function', 'named export is not a function')
+assert(defaultExport === AxeBuilder, 'default and named export are not the same');