Is it possible to customize webpack 4 modules in order to enable Jasmine to spy on their properties?

Question

Is it possible to customize webpack 4 modules in order to enable Jasmine to spy on their properties?

I've been facing issues trying to run my Jasmine test suite with webpack 4. Ever since I upgraded webpack, I keep getting this error message in almost every test:

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

The problem seems to stem from a common pattern we follow for creating spies on simple functions, like so:

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

I have experimented with module.rules[].type, but none of the available options seem to solve the issue.

According to this webpack GitHub issue, ECMA modules are designed to be non-writable, which makes sense for web usage. But is there really no workaround for running tests?

Here are the 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",

typescript webpack jasmine karma-jasmine webpack-4

Answer 1

Answer №1

If you want to make a property read-only using the spyOnProperty method, simply set the accessType argument to 'get'.

To implement this, your code would resemble the following:

import * as example from 'my/example';
//...
const mockFunc = jasmine.createSpy('mockFunction').and.returnValue('mockValue');
spyOnProperty(example, 'myFunc', 'get').and.returnValue(mockFunc);

Answer 2

If you want to make a property read-only using the spyOnProperty method, simply set the accessType argument to 'get'.

To implement this, your code would resemble the following:

import * as example from 'my/example';
//...
const mockFunc = jasmine.createSpy('mockFunction').and.returnValue('mockValue');
spyOnProperty(example, 'myFunc', 'get').and.returnValue(mockFunc);

Answer 3

Answer №2

There's a discussion on this GitHub thread where the consensus is that immutable exports are the desired outcome. However, user lavelle shared a interesting workaround (in this specific comment) where they opted to create separate webpack configurations for testing and production code. In their test config, they utilized "commonjs" modules which seemed to prevent the creation of getters.

Answer 4

There's a discussion on this GitHub thread where the consensus is that immutable exports are the desired outcome. However, user lavelle shared a interesting workaround (in this specific comment) where they opted to create separate webpack configurations for testing and production code. In their test config, they utilized "commonjs" modules which seemed to prevent the creation of getters.

Answer 5

Answer №3

Expanding on @Anton Poznyakovskiy's response:

In order to streamline my testing process, I introduced this TypeScript function to my shared testing module:

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

  return spy;
};

Here is an example of how to use it:

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

Answer 6

Expanding on @Anton Poznyakovskiy's response:

In order to streamline my testing process, I introduced this TypeScript function to my shared testing module:

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

  return spy;
};

Here is an example of how to use it:

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

Answer 7

Answer №4

One way to solve this issue is by encapsulating the methods in a custom class and then mocking it.

See an example below:

//Custom Class

import * as library from './myLibrary'

export class MethodWrapper{
    static _function = library.function;
}

//Main File
import { MethodWrapper } from './util/moduleWrapper';

const result = MethodWrapper._function(argument1, argument2);

//Testing File

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

spyOn(MethodWrapper, '_function').and.returnValue('mockedOutcome');

Answer 8

One way to solve this issue is by encapsulating the methods in a custom class and then mocking it.

See an example below:

//Custom Class

import * as library from './myLibrary'

export class MethodWrapper{
    static _function = library.function;
}

//Main File
import { MethodWrapper } from './util/moduleWrapper';

const result = MethodWrapper._function(argument1, argument2);

//Testing File

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

spyOn(MethodWrapper, '_function').and.returnValue('mockedOutcome');

Is it possible to customize webpack 4 modules in order to enable Jasmine to spy on their properties?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Enhancing TypeScript functionality by enforcing dynamic key usage

Implementing basic authentication with AWS Lambda and Application Load Balancer

How is it possible to access a variable in a function that hasn't been declared until later?

I need guidance on retrieving items from the useRouter() hook when utilizing Next.js with the App Router approach

Display the ion-button if the *ngIf condition is not present

Limit the outcomes of the Ionic timepicker

Tips for maintaining a healthy balance of tasks in libuv during IO operations

How can I customize the variables in Webpack for Sass and Foundation?

Differentiating between model types and parameters in Prisma can greatly enhance your understanding of

Unable to resolve all parameters for the RouterUtilities class

What is the process of incorporating a JavaScript node module into TypeScript?

Running multiple Karma and Jasmine projects within a single solution efficiently (and the necessity for Jenkins integration)

Launch another modal and then deactivate the initial modal

Utilizing event bubbling in Angular: a comprehensive guide

What is the best way to process a date string and format it in TypeScript?

What is the process of transforming an object type into a two-dimensional array using lodash?

What is the best way to implement Bootstrap 5 jQuery plugins in an ES6 project with Webpack?

What could be the reason for my button not activating my JavaScript function?

Secure a reliable result from a function utilizing switch statements in Typescript

Utilize rest parameters for destructuring操作