ES6/Mocha Include Files

Question

I'm quite new to ES6 export/import syntax and I would like to know how to dynamically import files with tests inside my indexTest.js file.

I have 2 files with tests.

PeopleTest.js

/* global it, describe, before, after */
/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */

import chai, { expect } from 'chai';
import dirtyChai from 'dirty-chai';

chai.use(dirtyChai);

describe('People tests', () => {
  it('Mock', () => {
    expect(true).to.be.true();
  });
});

PostTest.js

/* global it, describe, before, after */
/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */

import chai, { expect } from 'chai';
import dirtyChai from 'dirty-chai';

chai.use(dirtyChai);

describe('Post tests', () => {
  it('Mock', () => {
    expect(true).to.be.true();
  });
});

And I would like to have a global file to import these two files

indexTest.js

/* global it, describe, before, after */
/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */

import chai, { expect } from 'chai';
import dirtyChai from 'dirty-chai';

chai.use(dirtyChai);

describe('All tests', () => {
  before(() => {
    // some stuff
  });

  after(() => {
    // some stuff
  });

  import './PeopleTest';
  import './PostTest';
});

But of course its not working because import statement should be at the top level.

If you're using Node.JS, just use `require("./PeopleTest")` – CodingIntrigue Nov 08 '16 at 09:09 — CodingIntrigue, Nov 08 '16 at 09:09
Seems to be the only solution. Thanks! – Ilan Nov 08 '16 at 12:07 — Ilan, Nov 08 '16 at 12:07

score 1 · Accepted Answer · edited May 23 '17 at 12:33

You could do what CodingIntrigue suggested in a comment and call require instead of using import. However, this entails making an assumption regarding the run-time environment, which may not always hold. For instance, if you compile your ES6 code to an environment that uses AMD semantics for loading modules, then the require in your describe will be interpreted as if it were at the top with your import statements, and you won't get the results you want.

A way to get what you want, that does not assume anything else than the ES6 module loading semantics, would be to just modify the two modules you import so that they export a function that creates the tests they want to run, and then call that function where you need it. This way you decouple module loading from test creation.

One of the modules to be imported could be:

/* global it, describe, before, after */
/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */

import chai, { expect } from 'chai';
import dirtyChai from 'dirty-chai';

export default function peopleTest() {
  chai.use(dirtyChai);

  describe('People tests', () => {
    it('Mock', () => {
      expect(true).to.be.true();
    });
  });
};

And your main test file could become:

/* global it, describe, before, after */
/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */

import chai, { expect } from 'chai';
import dirtyChai from 'dirty-chai';
import peopleTest from './PeopleTest';
import postTest from './PostTest';

chai.use(dirtyChai);

describe('All tests', () => {
  before(() => {
    // some stuff
  });

  after(() => {
    // some stuff
  });

  peopleTest();
  postTest();    
});

score -1 · Answer 2 · edited May 23 '17 at 12:01

-1

You can only include a script file in an HTML page, not in another script file. That said, you can write JavaScript which loads your "included" script into the same page:

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

There's a good chance your code depends on your "included" script, however, in which case it may fail because the browser will load the "imported" script asynchronously. Your best bet will be to simply use a third-party library like jQuery or YUI, which solves this problem for you.

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
});

src: from this question

edited May 23 '17 at 12:01

Community

1
1

answered Nov 08 '16 at 07:21

Kevin Kloet

1,086
1
11
21

But this solution is relevant to front-end development right? My app is a full backend code using Node.js. There is no html/jquery stuff. – Ilan Nov 08 '16 at 07:52
[this question might help you](http://stackoverflow.com/questions/5797852/in-node-js-how-do-i-include-functions-from-my-other-files) – Kevin Kloet Nov 08 '16 at 07:56
`You can only include a script file in an HTML page, not in another script file ` - This is no longer true for frontend or backend development. Additionally, this answer does it apply to an environment like Mocha which is not run within a browser context. – CodingIntrigue Nov 08 '16 at 09:11
@CodingIntrigue Mocha can be run just as well [in the browser](https://mochajs.org/#running-mocha-in-the-browser) as in a backend environment. The problem with this answer is that it does not fit the OP's situation. – Louis Nov 08 '16 at 12:03

ES6/Mocha Include Files

2 Answers2