title: Mocking Globals to test browser modules in node
body: <p>I have some JavaScript modules which consume and declare globals. I'm aware that this is an anti-pattern, but it's a stopgap solution: until our dependencies come around to publishing their own ES module versions, we destructure them from globals. Here's what we do with Redux, as an example.</p>
  
  <pre><code>// Example: instead of
  import createStore from '../path/to/redux.js';
  // we do
  const {createStore} = Redux;
  </code></pre>
  
  <p>This works a treat in the browser, and when the dependencies update it will be simple to refactor, however, testing in node with mocha is a different story:</p>
  
  <pre><code>// myReducer.test.mjs
  
  import reducer from '../../src/redux-modules/myReducer';
  import initialState from '../../src/redux-modules/myReducer';
  
  export default function videosReducerTests() {
    assert('reducer', function() {
      it('should return initial state by default', function() {
        reducer({}, {}).should.equal(initialState);
      });
    });
  }
  </code></pre>
  
  <p>I've installed <code>@std/esm</code> to help node work with es modules, and set up my package.json with the following:</p>
  
  <pre><code>"devDependencies": {
    "@std/esm": "^0.14.0",
  },
  "@std/esm":"js",
  "scripts": {
    "redux-test": "node -r @std/esm test/redux/index.mjs",
  }
  </code></pre>
  
  <p>The result of running <code>yarn redux-test</code> is </p>
  
  <pre><code>ReferenceError: Redux is not defined
  </code></pre>
  
  <p>I've tried mocking the namespaces I need with <code>global.Redux = {createStore: Function}</code> etc. at the top of my test files, but those are all ignored, since imports are 'hoisted'.</p>
  
  <p>Any tips on how to get around this block?</p>