ES6 / Mocha包含文件

Question

我對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語句應該在頂層。

Answer 1

你可以做什么CodingIntrigue在評論建議 ，並調用require的，而不是使用import 。 但是，這需要對運行時環境進行假設，而這種假設可能並不總是成立。 例如，如果將ES6代碼編譯到使用AMD語義加載模塊的環境，則describe的require將被解釋為好像在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();    
});

Answer 2

您只能在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： 從這個問題