ES6 / Mocha включают файлы

Я совсем новичок в синтаксисе экспорта/импорта ES6 и хотел бы знать, как динамически импортировать файлы с тестами внутри моего indexTest.jsфайла.

У меня есть 2 файла с тестами.

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

И я хотел бы иметь глобальный файл для импорта этих двух файлов

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

Но, конечно, это не работает, потому importчто заявление должно быть на высшем уровне.

2 ответа

  1. Файл сценария можно включить только в HTML-страницу, а не в другой файл сценария. Тем не менее, вы можете написать JavaScript, который загружает ваш» включенный » скрипт на ту же страницу:

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

    Существует большая вероятность, что ваш код зависит от вашего» включенного «скрипта, однако, в этом случае он может завершиться неудачей, потому что браузер загрузит» импортированный » скрипт асинхронно. Лучше всего будет просто использовать стороннюю библиотеку, такую как jQuery или YUI, которая решает эту проблему для вас.

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

    src: из этого вопроса

  2. Вы можете сделать то, что CodingIntrigue предложил в комментарии и вызове requireвместо использования import. Однако это влечет за собой предположение относительно среды выполнения, которое может не всегда выполняться. Например, если вы скомпилируете код ES6 в среду, использующую семантику AMD для загрузки модулей, то requirein your describeбудет интерпретироваться так, как если бы он был вверху с вашими importинструкциями, и вы не получите желаемых результатов.

    Способ получить то, что вы хотите, что не предполагает ничего, кроме семантики загрузки модуля ES6, было бы просто изменить два модуля, которые вы импортируете так, чтобы они экспортировали функцию, которая создает тесты, которые они хотят запустить, а затем вызвать эту функцию, где вам это нужно. Таким образом вы отделяете загрузку модуля от создания теста.

    Одним из импортируемых модулей может быть:

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

    И ваш основной тестовый файл может стать:

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