获取 json 文件进行业力单元测试答案

【问题标题】：Get json file for karma unit test获取 json 文件进行业力单元测试
【发布时间】：2016-04-18 08:27:34
【问题描述】：

我想在我的单元测试中获取一个 JSON 文件，因为我的测试需要它，但我不知道如何包含该文件

我使用 karma 和 Jasmine 进行测试。我的项目是用 Angular 2 创建的。

我的 JSON 文件的名称是 'www/assets/mocks/emptyCalendarData.JSON'。

有人知道如何将 JSON 文件包含到规范文件中吗？

谢谢

更新

我尝试使用 HTTP get 但后来我得到了一个系统

let calendarData: Calendar;
http.get('www/assets/mocks/emptyCalendarData.json')
    .map(res => res.json())
    .subscribe(
        data => calendarData = data,
        err => console.log(JSON.stringify(err))
    );

然后我得到这个错误：

ERROR: Error{stack: null, originalErr: TypeError{stack: 'mergeOptions
get


eval code
eval@[native code]
__exec@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:1482:16
execute@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3896:22
linkDynamicModule@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3222:36
link@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3065:28
execute@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3402:17
doDynamicExecute@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:796:32
link@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:998:36
doLink@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:650:11
updateLinkSetOnLoad@http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:698:24
http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:510:30
invoke@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:364:34
run@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:257:50
http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:609:61
invokeTask@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:397:43
runTask@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:294:58
drainMicroTaskQueue@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:515:43
invoke@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:467:41
http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:92:33
invokeTask@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:397:43
runTask@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:294:58
invoke@http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:464:41', line: 38}, line: 821, sourceURL: 'http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624'}

【问题讨论】：

你想如何使用这个文件？这是一种配置测试处理的方法吗？
我想要类似let data: Calendar = { JSON FILE }

标签： json unit-testing angular karma-jasmine systemjs

【解决方案1】：

有很多方法可以做到这一点：

如果它在您的应用程序内部，则导入 json：import * as json from './test'; //will import test.json
使用Http下载文件并执行map(res=>res.json())
对于 webpack 使用 json-loader 插件：var json = require('./my.json')
对于 gulp/grunt 等，您可以编写代码生成器

【讨论】：

第一个选项不好，因为我希望它在一个名为 data 的变量中，而当我这样做时，第二个选项会出现 zoneJS / systemJS 错误
为什么不重命名然后import * as data from './test';
不幸的是，当我运行“npm start”时，调试器会抱怨“*.component.ts(3,24): error TS2307: Cannot find module './data1'。”我在 *.component.ts 的顶部有“import * as data from '.data1.json'”，并且 'data1.json' 与 *.component.ts 具有相同的目录路径

【解决方案2】：

我将 Mock JSON 数据像变量一样存储到 ts 文件中。即

export var getMockResponseJSON = { 'key': value };

稍后当我想访问这个变量时，我只需像这样导入它：

import {getMockResponseJSON} from "../JSONs";

并在我的课堂上使用它

expect(getMockResponseJSON.key).not.toEqual(1);

【讨论】：

【解决方案3】：

您可以在测试中利用 Angular2 的 Http 类来做到这一点。

这是beforeAll 函数中的示例：

beforeAll((done) => {
  let injector = Injector.resolveAndCreate([ HTTP_PROVIDERS ]);
  let http = injector.get(Http);
  http.get('app/data.json').subscribe(
    (data) => {
      this.data = data.json();
      done();
    }
  );
});

看到这个 plunkr：https://plnkr.co/edit/k6jxHf?p=preview。

【讨论】：