Stub an export from a native ES Module without babel

Question

I'm using AVA + sinon to build my unit test. Since I need ES6 modules and I don't like babel, I'm using mjs files all over my project, including the test files. I use "--experimental-modules" argument to start my project and I use "esm" package in the test. The following is my ava config and the test code.

  "ava": {
    "require": [
      "esm"
    ],
    "babel": false,
    "extensions": [
      "mjs"
    ]
  },


// test.mjs
import test from 'ava';
import sinon from 'sinon';
import { receiver } from '../src/receiver';
import * as factory from '../src/factory';

test('pipeline get called', async t => {
  const stub_factory = sinon.stub(factory, 'backbone_factory');
  t.pass();
});

But I get the error message:

  TypeError {
    message: 'ES Modules cannot be stubbed',
  }

How can I stub an ES6 module without babel?

Answer 1

According to John-David Dalton, the creator of the esm package, it is only possible to mutate the namespaces of *.js files - *.mjs files are locked down.

That means Sinon (and all other software) is not able to stub these modules - exactly as the error message points out. There are two ways to fix the issue here:

1. Just rename the files' extension to .js to make the exports mutable. This is the least invasive, as the mutableNamespace option is on by default for esm. This only applies when you use the esm loader, of course.
2. Use a dedicated module loader that proxies all the imports and replaces them with one of your liking.

The tech stack agnostic terminology for option 2 is a link seam - essentially replacing Node's default module loader. Usually one could use Quibble, ESMock, proxyquire or rewire, meaning the test above would look something like this when using Proxyquire:

// assuming that `receiver` uses `factory` internally

// comment out the import - we'll use proxyquire
// import * as factory from '../src/factory';
// import { receiver } from '../src/receiver';

const factory = { backbone_factory: sinon.stub() };
const receiver = proxyquire('../src/receiver', { './factory' : factory });

Modifying the proxyquire example to use Quibble or ESMock (both supports ESM natively) should be trivial.

Answer 2

Sinon needs to evolve with the times or be left behind (ESM is becoming defacto now with Node 12) as it is turning out to be a giant pain to use due to its many limitations.

This article provides a workaround (actually 4, but I only found 1 to be acceptable). In my case, I was exporting functions from a module directly and getting this error: ES Modules cannot be stubbed

export function abc() {

}

The solution was to put the functions into a class and export that instead:

export class Utils {
  abc() {
  
  }
}

notice that the function keyword is removed in the method syntax.

Happy Coding - hope Sinon makes it in the long run, but it's not looking good given its excessive rigidity.

Answer 3

Sticking with the questions Headline „Stub an export from a native ES Module without babel“ here's my take, using mocha and esmock:

(credits: certainly @oligofren brought me on the right path…)

package.json:

  "scripts": {
      ...
      "test": "mocha --loader=esmock",

  "devDependencies": {
      "esmock": "^2.1.0",
      "mocha": "^10.2.0",

TestDad.js (a class)

import { sonBar } from './testSon.js'

export default class TestDad {
  constructor() {
    console.log(purple('constructing TestDad, calling...'))
    sonBar()
  }
}

testSon.js (a 'util' library)

export const sonFoo = () => {
  console.log(`Original Son 'foo' and here, my brother... `)
  sonBar()
}

export const sonBar = () => {
  console.log(`Original Son bar`)
}

export default { sonFoo, sonBar }

esmockTest.js

import esmock from 'esmock'

describe.only(autoSuiteName(import.meta.url),
  () => {
    it('Test 1', async() => {
      const TestDad = await esmock('../src/commands/TestDad.js', {
        '../src/commands/testSon.js': {
          sonBar: () => { console.log('STEPSON Bar') }
        }
      })

      // eslint-disable-next-line no-new
      new TestDad()
    })
    it('Test 2', async() => {
      const testSon = await esmock('../src/commands/testSon.js')

      testSon.sonBar = () => { console.log('ANOTHER STEPSON Bar') }

      testSon.sonFoo() // still original
      testSon.sonBar() // different now
    })
  })
autoSuiteName(import.meta.url)

regarding Test1

• working nicely, import bended as desired.

regarding Test1

• Bending a single function to do something else is not a problem. (but then there is not much test value in calling your very own function you just defined, is there?)
• Enclosed function calls within the module (i.e. from sonFoo to sonBar) remain what they are, they are indeed a closure, still pointing to the prior function
• Btw also tested that: No better results with sinon.callsFake() (would have been surprising if there was…)