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

Posted 2023-02-22

【中文标题】可以将 webpack 4 模块配置为允许 Jasmine 监视其成员吗？

【英文标题】：Can webpack 4 modules be configured as to allow Jasmine to spy on their members?

【发布时间】：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",

【参考方案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。