可以将 webpack 4 模块配置为允许 Jasmine 监视其成员吗？答案

【问题标题】：Can webpack 4 modules be configured as to allow Jasmine to spy on their members?可以将 webpack 4 模块配置为允许 Jasmine 监视其成员吗？
【发布时间】：2018-08-30 00:09:21
【问题描述】：

我一直无法让我的测试 jasmine 测试套件与 webpack 4 一起运行。升级 webpack 后，几乎每次测试都会出现以下错误：

Error: <spyOn> : getField is not declared writable or has no setter

这是由于我们用来为简单函数创建间谍的常见模式是：

import * as mod from 'my/module';
//...
const funcSpy = spyOn(mod, 'myFunc');

我玩过module.rules[].type，但似乎没有一个选项可以解决问题。

这个 webpack GH issue 表明 ECMA 模块是不可写的，这对网络来说是有意义的，但是真的没有测试的解决方法吗？

相关包版本：

"jasmine-core": "2.6.4",
"typescript": "2.5.3",
"webpack": "4.1.1",
"webpack-cli": "^2.0.12",
"karma": "^0.13.22",
"karma-jasmine": "^1.1.0",
"karma-webpack": "^2.0.13",

【问题讨论】：

标签： typescript webpack jasmine karma-jasmine webpack-4

【解决方案1】：

要解决这个问题，可以将方法包装在自定义类中，然后模拟它。

示例如下：

//Common Utility

import * as library from './myLibrary'

export class CustomWrapper{
    static _func = library.func;
}

//Code File
import { CustomWrapper } from './util/moduleWrapper';

const output = CustomWrapper._func(arg1, arg2);

//Test File 

import { CustomWrapper } from './util/moduleWrapper';

spyOn(CustomWrapper, '_func').and.returnValue('mockedResult');

【讨论】：

【解决方案2】：

添加到@Anton Poznyakovskiy 的答案：

为了方便起见，我已将此 TypeScript 函数添加到我的共享测试模块中：

export const spyOnFunction = <T>(obj: T, func: keyof T) => {
  const spy = jasmine.createSpy(func as string);
  spyOnProperty(obj, func, 'get').and.returnValue(spy);

  return spy;
};

示例用法：

import * as mod from 'my/module';
//...
spyOnFunction(mod, 'myFunc').and.returnValue('myMockReturnValue');

【讨论】：

【解决方案3】：

spyOnProperty 允许通过将 accessType 参数设置为 'get' 来将属性视为只读。

您的设置将如下所示

import * as mod from 'my/module';
//...
const funcSpy = jasmine.createSpy('myFunc').and.returnValue('myMockReturnValue');
spyOnProperty(mod, 'myFunc', 'get').and.returnValue(funcSpy);

【讨论】：

很奇怪，但这对我不起作用。它失败并出现以下错误：===错误：：myFunc 未声明为可配置===。这就是我声明函数的方式：export var myFunc = function(){...};
在github.com/jasmine/jasmine/issues/1414#issuecomment-457878397查看fixedSpyOn函数
@AmerMograbi 你找到避免错误的方法了吗？

【解决方案4】：

this GitHub issue 他们得出了相同的结论；不可变的出口是有意的。但是用户 lavelle 有一个解决方法（在 this comment 中），他们为测试和生产代码创建了不同的 webpack 配置。测试配置使用 "commonjs" 模块，这似乎对他们有用，因为没有创建 getter。

【讨论】：