28

I've been unable to get my test jasmine test suite running with webpack 4. After upgrading webpack, I get the following error for almost every test:

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

This is due to a common pattern we use to create spys for simple functions is:

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

I've played around with module.rules[].type but none of the options seem to do the trick.

This webpack GH issue indicates ECMA modules are meant to not be writable which makes sense for the web but is there really no workaround for testing?

Relevant package versions:

"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",
Ryan
  • 599
  • 2
  • 5
  • 14

4 Answers4

26

There's spyOnProperty which allows treating a property as read-only by setting the accessType argument to 'get'.

Your setup would then look like

import * as mod from 'my/module';
//...
const funcSpy = jasmine.createSpy('myFunc').and.returnValue('myMockReturnValue');
spyOnProperty(mod, 'myFunc', 'get').and.returnValue(funcSpy);
Anton Poznyakovskiy
  • 2,109
  • 1
  • 20
  • 38
  • 18
    Weird but this doesn't work for me. It fails with the following error: ===Error: : myFunc is not declared configurable===. This is how I declared my function: export var myFunc = function(){...}; – Amer Mograbi Feb 14 '20 at 11:17
  • See fixedSpyOn function here github.com/jasmine/jasmine/issues/1414#issuecomment-457878397 – Richard Collette Mar 23 '20 at 18:27
  • 1
    @AmerMograbi did you find a way to avoid your error ? – pred Sep 21 '21 at 09:49
3

There's this GitHub issue where they arrive at the same conclusion; that immutable exports are intended. But user lavelle has a workaround (in this comment) where they've created different webpack configs for test and production code. The test config uses "commonjs" modules, which seems to have worked for them by not creating getters.

Cem Schemel
  • 442
  • 3
  • 13
3

Adding to @Anton Poznyakovskiy's answer:

I've added this TypeScript function to my shared testing module as a convenience:

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;
};

Example usage:

import * as mod from 'my/module';
//...
spyOnFunction(mod, 'myFunc').and.returnValue('myMockReturnValue');
Tom Faltesek
  • 2,768
  • 1
  • 19
  • 30
1

To resolve this, it is possible to wrap the methods in custom class and then mock it.

Example below:

//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');
Tushar Agey
  • 11
  • 2