import * as (jasmine spyOn) not writable
I've had the same issue and the only workaround I found was to use babel-plugin-rewire.
I've created a very basic repo here if that can help.
Here are the main files:
- src/index.js
function bar() {
return 42;
}
export function foo() {
const result = bar();
return result;
}
- test/index_test.js
import { foo, __RewireAPI__ as RewireAPI } from '../src/index';
describe('test foo', () => {
it('should call bar', () => {
const barSpy = jasmine.createSpy('bar');
RewireAPI.__Rewire__('bar', barSpy);
foo();
expect(barSpy).toHaveBeenCalledWith();
});
});
- karma.conf.js
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: ['test/index_test.js'],
// list of files / patterns to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/**/*.js': ['webpack', 'sourcemap'],
},
webpack: {
mode: 'development',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /src\/.+\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['rewire'],
},
},
},
],
},
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
// browsers: ['Chrome'],
browsers: ['MyHeadlessChrome'],
customLaunchers: {
MyHeadlessChrome: {
base: 'ChromeHeadless',
flags: ['--remote-debugging-port=9333'],
},
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
});
};
- package.json
{
"name": "webpack-karma-spy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "./node_modules/karma/bin/karma start"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.6",
"babel-plugin-rewire": "^1.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.20.1",
"jasmine": "^3.5.0",
"karma": "^4.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-jasmine": "^3.1.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^4.0.2",
"webpack": "^4.41.6"
}
}
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 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);