title: Trying to use mocha, ES6 modules, and ts-node with the --experimental-loader option
body: <p>I'm trying to get the ts-node option <code>--experimental-loader</code> working along with mocha, and having no luck. Until I started trying to compile ES6 modules, I used to be able to run mocha tests this way:</p>
  <pre><code>&quot;test&quot;: &quot;nyc --reporter=html mocha --require ts-node/register src/**/*.spec.ts&quot;
  </code></pre>
  <p>That doesn't work anymore when generating ES6 modules.</p>
  <p>I'd use the <code>TS_NODE_COMPILER_OPTIONS='{\&quot;module\&quot;: \&quot;commonjs\&quot; }'</code> solution for testing, but that won't work for me because of another complication: I'm generating ES6 modules as a first step in my build, but <em>also</em> generating ES5/CommonJS modules using webpack and babel. That last step doesn't work unless I add <code>.js</code> to the end of my local TypeScript <code>import</code> statements.</p>
  <p>But adding those <code>.js</code> extensions turns out to break the <code>TS_NODE_COMPILER_OPTIONS='{\&quot;module\&quot;: \&quot;commonjs\&quot; }'</code> solution, which will work, however, if I go back and delete all of the <code>.js</code> extensions. I obviously don't want a test and build process where I have to keep going back and forth between adding and removing those extensions.</p>
  <p>To simplify for now, I've taken out nyc, and I'm trying to run tests like this:</p>
  <pre><code>mocha -r ts-node/register --experimental-loader ./ts-loader.mjs src/**/*.spec.ts
  </code></pre>
  <p>I get no errors this way, but nothing happens either. It's like the <code>src/**/*.spec.ts</code> doesn't exist.</p>
  <p>My do-nothing (for now) dummy loader looks like this:</p>
  <pre><code>console.log('ts-loader loaded');
  
  export async function resolve(specifier, context, defaultResolve) {
    console.log('resolve');
    return defaultResolve(specifier, context, defaultResolve);
  }
  
  export async function getFormat(url, context, defaultGetFormat) {
    console.log('getFormat');
    return defaultGetFormat(url, context, defaultGetFormat);
  }
  
  export async function getSource(url, context, defaultGetSource) {
    console.log('getSource');
    return defaultGetSource(url, context, defaultGetSource);
  }
  
  export async function transformSource(source, context, defaultTransformSource) {
    console.log('transformSource');
    return defaultTransformSource(source, context, defaultTransformSource);
  }
  
  export function getGlobalPreloadCode() {
    console.log('getGlobalPreloadCode');
    return '';
  }
  </code></pre>
  <p>I can tell it gets loaded because the <code>'ts-loader loaded'</code> message appears, but none of the functions ever get called.</p>
  <p>I've tried other permutations, but just get errors like <code>src/**/*.spec.ts</code> being treated as a literal file name instead of a glob, or errors about modules not being found.</p>
  <p>I was hoping to see my loader invoked for every <code>import</code> being handled, and then figuring out how to manipulate the file extensions, but I haven't managed to get that far yet. Any suggestions?</p>
  <p>I'm using node v14.15.1. The full code for my project, with a working build, but broken tests, can be found here: <a href="https://github.com/kshetline/tubular_math" rel="nofollow noreferrer">https://github.com/kshetline/tubular_math</a></p>