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

Breaking down large reducer into smaller reducers

Aurelia's navigation feature adds "?id=5" to the URL instead of "/5"

I am facing an issue with my useFetch hook causing excessive re-renders

The error message "TypeError: 'results.length' is not an object" occurred within the Search Component during evaluation

Using sl-vue-tree with vue-cli3.1 on internet explorer 11

What is the significance of the colon before the params list in Typescript?

How to pass props to customize styles in MUI5 using TypeScript

Error TS2403: All variable declarations following the initial declaration must be of the same type in a React project

Removing the path from import filenames in React during NPM build: A step-by-step guide

What is the significance of var-less variables in TypeScript class definitions?

What is the reason behind TypeScript indicating that `'string' cannot be assigned to the type 'RequestMode'`?

Images in the Ionic app are failing to display certain asset files

Learn the method for triggering events with a strongly-typed payload in Vue 3 Composition API and TypeScript

I'm trying to figure out which one is the correct term on Ubuntu - is it "node" or "nodejs"? And

Creating a backup link for a video player component in NextJs

The Ionic project compilation was unsuccessful

The useForm function from react-hook-form is triggered each time a page is routed in Nextjs

The type 'true | CallableFunction' does not have any callable constituents

JavaScript - Modifying several object properties within an array of objects

Increase the size of the NativeScript switch component