ES6 / Mocha包含文件

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.

Answer 1

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();    
});

Answer 2

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