Jest 和混合 Angular/AngularJS 应用程序

Question

我正在考虑使用jest 来测试我的混合应用程序（Angular + AngularJS）。我使用jest-preset-angular 进行Angular 测试，但我还需要angular-mocks 进行AngularJS 测试。

问题是当我在setupJest.ts 中同时导入jest-preset-angular 和angular-mocks 时，所有测试（Angular 和AngularJS）都失败并出现Cannot read property '$injector' of null 错误（来自angular-mocks）。

如果我只导入 jest-preset-angular，所有 Angular 测试都通过，如果我只导入 angular-mocks，所有 AngularJS 测试都通过。

如何让它一起工作？

package.json：

"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
}

setupJest.ts：

import 'jest-preset-angular';
import 'angular';
import 'angular-mocks';

const mock = () => {
    let storage = {};
    return {
        getItem: key => key in storage ? storage[key] : null,
        setItem: (key, value) => storage[key] = value || '',
        removeItem: key => delete storage[key],
        clear: () => storage = {},
    };
};

Object.defineProperty(window, 'localStorage', {value: mock()});
Object.defineProperty(window, 'sessionStorage', {value: mock()});
Object.defineProperty(window, 'getComputedStyle', {
    value: () => ['-webkit-appearance']
});

Answer 1

事实证明，顺序很重要。
在jest-preset-angular 之前导入angular-mocks 可以解决此问题：

import 'angular';
import 'angular-mocks';
import 'jest-preset-angular';