如何在 Angular 2 业力茉莉花测试中从 JSON 文件加载模拟数据？答案

【问题标题】：How to load mock data from JSON file in Angular 2 karma jasmine test?如何在 Angular 2 业力茉莉花测试中从 JSON 文件加载模拟数据？
【发布时间】：2017-06-27 00:15:07
【问题描述】：

我正在为 angular 2 编写 karma jasmine 测试用例，

并且我们遇到了在单独的 JSON 文件中模拟数据的要求，因为数据量很大（希望确保代码干净）。为此，我进行了很多搜索，但没有找到合适的解决方案。

我们已经使用 MockBackend 模拟了 HTTP 服务，因此我们不能使用 Angular 的 HTTP 服务来加载 JSON，因为它最终请求将转到 MockBackend。

那么有没有其他方法不使用任何第三方库，如 jasmine-jquery 还是 Karma-jasmine-preprocessor ？ 更多类型的 Angular JS 2 方式。

【问题讨论】：

标签： json angular jasmine karma-jasmine

【解决方案1】：

我正在尝试做同样的事情。如果您像这样传递 JSON 的路径，System.import 将起作用：

System.import('../../assets/mock-data/mock-data.json')
    .then((json) => {
        console.log(json);
    });

真正奇怪的是，我没有设法让它与变量一起工作：

let myUrl: string = '../../assets/mock-data/mock-data.json';
System.import(myUrl)
    .then((json) => {
        console.log(json);
    });`

【讨论】：

这是有道理的，因为 System.import 像 require 和 ES6 import 等是在没有代码评估的情况下静态读取的（在编译时），所以你不能使用变量或代码来生成路径（比如 ' src' + '/assets' 或 getPath() 等）。

【解决方案2】：

我遇到了同样的问题！

最后，我意识到直接在 TypeScript 中使用 require() 函数就可以了。 Node和@types/node都支持，否则有些需要声明require类型。

因此，要在 Angular 2 Karma Jasmine 测试中从 JSON 文件加载模拟数据，请执行以下操作：

const data: any = require('../../assets/mock-data.json');

PS：credits to Artur Ampilogov

【讨论】：

我有这个问题。如果我做 const data: any = require('../../assets/mock-data.json'); const data1: any = require('../../assets/mock-data.json');然后通过引用复制 data 和 data1 。如果我尝试使用扩展运算符按值复制 const data: any = {...require('../../assets/mock-data.json')};这是行不通的。仍然互相引用。
这是一种非常糟糕的方法，因为它会缓存响应，因此如果您模拟此数据（例如用于 http 响应）并对正在使用的数据执行任何更改逻辑，它将在后台更改此值.尽量避免加载 JSON 文件进行测试。
有同样的问题，很难重现，因为我的环境改变了测试的顺序，有时我有一个错误，有时没有。因此，更好的方法是使用const data: any = Object.assign({}, require('../../assets/mock-data.json'));，因为它首先将对象复制到一个新对象中。
但是如何从 JSON 文件加载加载数据作为 observable 呢？当我们模拟从文件中读取 JSON 数据的服务时，REQUIRE 不起作用
测试数据应该放在assets文件夹吗？据我了解，资产文件夹将包含在生产版本中。

【解决方案3】：

您可以通过指定配置 typescript 编译器以加载 json 文件

--resolveJsonModule

或者通过添加

"resolveJsonModule": true

到 tsconfig.json 的 compilerOptions 属性

然后，在您的规范文件中，您可以将 json 文件导入到变量中，如下所示：

import * as myJson from './test/myJson.json';

然后您可以在测试中访问它，例如：

it('it should let me access properties from my json file', () => {
    expect(myJson.myProperty).toBeTruthy();
});

【讨论】：

我相信这是最新的正确答案。谢谢。