ES6/Mocha 包含文件

Question

我对 ES6 export/import 语法很陌生，我想知道如何在我的 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

您只能在 HTML 页面中包含一个脚本文件，而不能包含在另一个脚本文件中。也就是说，您可以编写 JavaScript 将您的 "included" 脚本加载到同一页面：

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

您的代码很有可能依赖于您的 "included" 脚本，但是，在这种情况下它可能会失败，因为浏览器将异步加载 "imported" 脚本。你最好的选择是简单地使用像 jQuery 或 YUI 这样的第三方库，它可以为你解决这个问题。

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

来源：from this question

Answer 2

您可以执行并调用 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();    
});

ES6/Mocha 包含文件

ES6/Mocha Include Files

javascript

mocha.js

chai

ecmascript-6