Can webpack 4 modules be configured as to allow Jasmine to spy on their members?

jasmine spyon imported function
jest spyon imported function
jasmine is not declared configurable
jest spy on function in same file
define getter function for harmony exports
sinon webpack

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",

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

Cannot spy on individual functions that are individually exported , Can webpack 4 modules be configured as to allow Jasmine to spy on their members? - typescript. 16 Can webpack 4 modules be configured as to allow Jasmine to spy on their members? Feb 19 '19 13 “Function has no address” despite disabled optimization (/Od) Dec 4 '14

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');

Tests breaks after upgrading jasmine-core from 2.99.0 to 3.1.0 , For example I'm trying to mock functions exported the following way: using import * as bar , they are compiled to getters/setters in Webpack 4. Jasmine can now spy on this function in the tests: force commonjs module output, since it let mock exported members on modules to anywhere in the  Jasmine Standalone Webpack This is basically the Jasmine Standalone Release ported to use webpack . It shows that it is possible to use custom loaders like babel to get ES6 support with very little effort .

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.

import * as (jasmine spyOn) not writable - webpack - iOS, Can't really tell which package is responsible for the actual bug. I have an Angular 5 project running karma/jasmine. +1 38. @slackersoft. Copy link. Quote reply. Member 10% building modules 1/1 modules 0 active16 05 2018 above led me to the fact that I did have a reporter configuration file in my  webpack version 1.15.0 even with --display-modules --display-reasons and --profile will not display hidden modules. This comment has been minimized. Sign in to view

Testing Components in Angular 2 with Jasmine, source: Can webpack 4 modules be configured as to allow Jasmine to spy on their members? There's spyOnProperty which allows treating a property as  It defaults to localhost, but it can be overwritten by specifying the host parameter with either a hostname or IP address. However, it seems that you can only specify one. For example, if I specify the IP Address, then it stops responding to localhost. How can I configure Webpack Dev Server to listen to multiple hosts?

The Jest Object · Jest, The term “component” is really just analogous term for system. term, take a look at the “Test-Driven Development” section of Setting Up Angular 2 with Webpack. It will let us create our components, so they can be used to run unit tests. pulls in, so we import that in to our testing module configuration. Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh. This page focuses on implementation while the concepts page gives more details on how it works and why it's useful.

ES6 Class Mocks · Jest, The methods in the `jest` object help create mocks and let you control Jest's overall even if we set the automocking in a jest configuration expect(utils.​authorize()). For example, if you're writing a test for a module that uses a large number of is maintained, all of the class member functions and properties will be mocked. I’ve been using AWS Cognito as the authentication piece to give users access to an Angular web project I’m working on. Everything worked as advertised and I was happy with the result, until I started testing my authentication service.