Jasmine: How to spy imported function/constructor on ES6? - javascript

I am wondering how can I spy/stub function on Jasmine if I am using ES6 imports/exports with babel?
import MobileDetect from 'mobile-detect';
it('should spy MobileDetect', () => {
MobileDetect = jasmine.createSpy('MobileDetect');
});`
The first problem is that I can't rewrite read-only module
Module build failed: SyntaxError: /Users/oleg/projects/rp/popup/lib/spec/popup.spec.js: "MobileDetect" is read-only
it('should spy MobileDetect', () => {
console.log(MobileDetect.prototype.constructor === MobileDetect); //true
spyOn( MobileDetect.prototype, 'constructor' );
console.log(MobileDetect.prototype.constructor === MobileDetect); //false
});`
I tried this approach, but it doesn't work too... MobileDetect.prototype.constructor spied, but MobileDetect directly not.
What do you think about this problem?

Similar to proxyquire for mocking require() statements in your tests, you can use babel-plugin-rewire to do the same with ES6 imports.
Your test setup might look something like this;
import myModuleUnderTest from '../src/popup';
beforeEach(() => {
this.fakeMobileDetect = jasmine.createSpy();
myModuleUnderTest.__Rewire__('MobileDetect', this.fakeMobileDetect);
});
Which you can revert to normal with;
afterEach(() => {
myModuleUnderTest.__ResetDependency__('MobileDetect');
});

Related

custom global function not defined when testing in Jest; works fine when not testing

I have a custom, globally-scoped function in my Express app, foo. When running my Jest test scripts, this function is caught as undefined. Thus, any tests using them fail.
index.d.ts:
declare global{
function foo(): string;
}
export {};
src/Utils/index.ts:
global.foo = function foo(){
return "bar";
};
src/Modules/Example.module.ts:
export const test = () => {
// This will return bar, as expected, when developing.
// A reference error will only be thrown when running npm test.
return foo();
};
src/Modules/Example.test.ts:
import { test } from "./Example.module";
describe("modules/example", () => {
describe("test", () => {
it("returns bar", () => {
let bar = test();
expect(bar).toBe("bar");
});
});
});
Despite this not being an issue while developing, this test results in the error:
ReferenceError: foo is not defined.
export const test = () => {
return foo();
^
...
};
You can specify src/Utils/index.ts as a setup file, which Jest will load and execute before running tests. You can add it to your Jest configuration file (or create one if you don't have one):
Assuming a CJS-format Jest configuration, jest.config.js:
module.exports = {
// Your other configuration options
"setupFiles": ["<rootDir>/src/Utils/index.ts"]
};
It will look slightly different if you are using a JSON or TypeScript Jest configuration file.
However I don't recommend using global variables (even if you use them a lot). With a proper code editor setup, it is easy to import a function from another file.

Jest, mocking ES6 class constructor not working as intended

I have code that I am trying to test with Jest. I have an ES6 class, let's call it ClassA. Within my test file, I am mocking ClassA as follows:
const mockGetCheapestProductAllPages = jest.fn()
const ClassA = require('../src/ClassA/ClassA')
jest.mock('../src/ClassA/ClassA', () => {
return jest.fn().mockImplementation(() => {
return { getCheapestProductAllPages: mockGetCheapestProductAllPages }
})
})
This syntax works just fine for mocking the class. I am able to spy on getCheapestProductAllPages just fine, and mock return values from it, etc. The problem is, I cannot spy on the constructor for some reason. In the Jest documentation on mocking ES6 classes, it is implied that you can just reference the imported class in order to spy on the constructor, like so:
expect(ClassA).toHaveBeenCalled()
Unfortunately, this is not working for me. I know the constructor is being invoked in my test, but Jest tells me it is invoked 0 times. Any suggestions/anything look wrong? Tried to only share relevant code but please let me know if there is anything else you need to see. Thanks!
Ended up declaring my Jest mockImplementation outside of my mock and referencing it in my tests like so:
// top of test file
const mockGetCheapestProductAllPages = jest.fn()
const mockClassAImplementation = jest.fn().mockImplementation(() => {
return { getCheapestProductAllPages: mockGetCheapestProductAllPages }
})
const ClassA = require('../src/ClassA/ClassA')
jest.mock('../src/ClassA/ClassA', () => {
return mockClassAImplementation
})
// tests
test('Expect ClassA constructor to be called', () => {
// invoke method that invokes ClassA constructor
// this works!
expect(mockClassAImplementation).toHaveBeenCalled()
})

object.hasOwnProperty is not a function when spying on es6 module

So I'm doing a little bit of experimental programming to ensure I understand how certain things work, and I'm coming across an error which I don't understand. I can't see any obvious solutions for this problem using Google or on here specifically.
I'm trying to confirm to myself exactly how jest.spyOn() works when applied to module imports. But right now the answer is that it just doesn't.
spy.js:
export const foo = () => {
console.log("called foo");
};
export const bar = () => {
console.log("called bar");
};
spy.spec.js:
import * as Foo from "./spy";
import { jest } from "#jest/globals";
test("call foo", () => {
jest.spyOn(Foo, "bar");
});
package.json:
{
"type": "module",
"scripts": {
"test": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
},
"dependencies": {
"jest": "^27.0.1"
}
}
When I run this test, I get the following error: TypeError: object.hasOwnProperty is not a function. I'm running node v15.12.0.
Can somebody explain to my
Why this error occurs
What I can do to remove it
Edit
It has been suggested that the problem is to do with the module import lacking a prototype property. This is not the issue - see below
import * as Foo from "./spy";
import { jest } from "#jest/globals";
test("SpyOn plain object", () => {
const bar = { baz: () => {} };
expect(bar.prototype).toBeUndefined(); // Pass
jest.spyOn(bar, "baz"); // No error
});
test("SpyOn import", () => {
expect(Foo.prototype).toBeUndefined(); // Pass
jest.spyOn(Foo, "foo"); // Error!
});
I debugged spyOn to see what happens.
Since Foo is an object of type Module, it doesn't have an hasOwnProperty method (see this answer regarding module namespace exotic objects).
Hence, spyOn throws in the following line (the object is the module Foo):
const isMethodOwner = object.hasOwnProperty(methodName);
If we change it to:
const isMethodOwner = Object.prototype.hasOwnProperty.call(object, methodName);
It would work, but we'll encounter another error(s) in the code that follows, for example here:
object[methodName] = original;
Which throws:
TypeError: Cannot assign to read only property 'bar' of object '[object Module]'
So maybe it's "better" to just reassign object?:
object = Object.assign({}, object);
In which case the following test passes:
test("call bar", () => {
const spy = jest.spyOn(Foo, "bar");
spy();
expect(spy).toHaveBeenCalled();
});
But the following test fails, though I can't tell if it should pass at all?:
test("call bar", () => {
const spy = jest.spyOn(Foo, "bar");
Foo.bar();
expect(spy).toHaveBeenCalled();
});
Let us open a jest issue?
I just added the missing method.
Foo.hasOwnProperty = () => Object.hasOwnProperty;
jest.spyOn(Foo, "foo")
Not ideal... but worked. I was using Vue and Jest and solved the error for me.

Manual mock not working in with Jest

Can somebody help me with manual mocking in Jest, please? :)
I try to have Jest use the mock instead of the actual module.
my test:
// __tests__/mockTest.js
import ModuleA from "../src/ModuleA"
describe("ModuleA", () => {
beforeEach(() => {
jest.mock("../src/ModuleA")
})
it("should return the mock name", () => {
const name = ModuleA.getModuleName()
expect(name).toBe("mockModuleA")
})
})
my code:
// src/ModuleA.js
export default {
getModuleName: () => "moduleA"
}
// src/__mocks__/ModuleA.js
export default {
getModuleName: () => "mockModuleA"
}
I think I followed everything the documentation says about manual mocks, but perhaps I'm overlooking something here?
This is my result:
Expected value to be:
"mockModuleA"
Received:
"moduleA"
Module mocks are hoisted when possible with babel-jest transform, so this will result in mocked module:
import ModuleA from "../src/ModuleA"
jest.mock("../src/ModuleA") // hoisted to be evaluated prior to import
This won't work if a module should be mocked per test basis, because jest.mock resides in beforeEach function.
In this case require should be used:
describe("ModuleA", () => {
beforeEach(() => {
jest.mock("../src/ModuleA")
})
it("should return the mock name", () => {
const ModuleA = require("../src/ModuleA").default;
const name = ModuleA.getModuleName()
expect(name).toBe("mockModuleA")
})
})
Since it's not an export but a method in default export that should be mocked, this can also be achieved by mocking ModuleA.getModuleName instead of entire module.
This answer is not strictly related to the OPs question but google lead me here for a similar issue where jest.mock('module', () => ({})) in the root of a file did not work. In my case it was caused by cyclic dependencies. So if jest suddenly starts to ignore calls to jest.mock() then you might want to check for cyclic dependencies in your files.

Mock dependency in Jest with TypeScript

When testing a module that has a dependency in a different file and assigning that module to be a jest.mock, TypeScript gives an error that the method mockReturnThisOnce (or any other jest.mock method) does not exist on the dependency, this is because it is previously typed.
What is the proper way to get TypeScript to inherit the types from jest.mock?
Here is a quick example.
Dependency
const myDep = (name: string) => name;
export default myDep;
test.ts
import * as dep from '../depenendency';
jest.mock('../dependency');
it('should do what I need', () => {
//this throws ts error
// Property mockReturnValueOnce does not exist on type (name: string)....
dep.default.mockReturnValueOnce('return')
}
I feel like this is a very common use case and not sure how to properly type this.
You can use type casting and your test.ts should look like this:
import * as dep from '../dependency';
jest.mock('../dependency');
const mockedDependency = <jest.Mock<typeof dep.default>>dep.default;
it('should do what I need', () => {
//this throws ts error
// Property mockReturnValueOnce does not exist on type (name: string)....
mockedDependency.mockReturnValueOnce('return');
});
TS transpiler is not aware that jest.mock('../dependency'); changes type of dep thus you have to use type casting. As imported dep is not a type definition you have to get its type with typeof dep.default.
Here are some other useful patterns I've found during my work with Jest and TS
When imported element is a class then you don't have to use typeof for example:
import { SomeClass } from './SomeClass';
jest.mock('./SomeClass');
const mockedClass = <jest.Mock<SomeClass>>SomeClass;
This solution is also useful when you have to mock some node native modules:
import { existsSync } from 'fs';
jest.mock('fs');
const mockedExistsSync = <jest.Mock<typeof existsSync>>existsSync;
In case you don't want to use jest automatic mock and prefer create manual one
import TestedClass from './TestedClass';
import TestedClassDependency from './TestedClassDependency';
const testedClassDependencyMock = jest.fn<TestedClassDependency>(() => ({
// implementation
}));
it('Should throw an error when calling playSomethingCool', () => {
const testedClass = new TestedClass(testedClassDependencyMock());
});
testedClassDependencyMock() creates mocked object instance
TestedClassDependency can be either class or type or interface
Use the mocked helper
like explained here
// foo.spec.ts
import { foo } from './foo'
jest.mock('./foo')
// here the whole foo var is mocked deeply
const mockedFoo = jest.mocked(foo, true)
test('deep', () => {
// there will be no TS error here, and you'll have completion in modern IDEs
mockedFoo.a.b.c.hello('me')
// same here
expect(mockedFoo.a.b.c.hello.mock.calls).toHaveLength(1)
})
test('direct', () => {
foo.name()
// here only foo.name is mocked (or its methods if it's an object)
expect(jest.mocked(foo.name).mock.calls).toHaveLength(1)
})
There are two solutions tested for TypeScript version 3.x and 4.x, both are casting desired function
1) Use jest.MockedFunction
import * as dep from './dependency';
jest.mock('./dependency');
const mockMyFunction = dep.myFunction as jest.MockedFunction<typeof dep.myFunction>;
2) Use jest.Mock
import * as dep from './dependency';
jest.mock('./dependency');
const mockMyFunction = dep.default as jest.Mock;
There is no difference between these two solutions. The second one is shorter and I would therefore suggest using that one.
Both casting solutions allows to call any jest mock function on mockMyFunction like mockReturnValue or mockResolvedValue
https://jestjs.io/docs/en/mock-function-api.html
mockMyFunction.mockReturnValue('value');
mockMyFunction can be used normally for expect
expect(mockMyFunction).toHaveBeenCalledTimes(1);
I use the pattern from #types/jest/index.d.ts just above the type def for Mocked (line 515):
import { Api } from "../api";
jest.mock("../api");
const myApi: jest.Mocked<Api> = new Api() as any;
myApi.myApiMethod.mockImplementation(() => "test");
Cast as jest.Mock
Simply casting the function to jest.Mock should do the trick:
(dep.default as jest.Mock).mockReturnValueOnce('return')
Use as jest.Mock and nothing else
The most concise way of mocking a module exported as default in ts-jest that I can think of really boils down to casting the module as jest.Mock.
Code:
import myDep from '../dependency' // No `* as` here
jest.mock('../dependency')
it('does what I need', () => {
// Only diff with pure JavaScript is the presence of `as jest.Mock`
(myDep as jest.Mock).mockReturnValueOnce('return')
// Call function that calls the mocked module here
// Notice there's no reference to `.default` below
expect(myDep).toHaveBeenCalled()
})
Benefits:
does not require referring to the default property anywhere in the test code - you reference the actual exported function name instead,
you can use the same technique for mocking named exports,
no * as in the import statement,
no complex casting using the typeof keyword,
no extra dependencies like mocked.
The latest jest allows you to do this very easily with jest.mocked
import * as dep from '../dependency';
jest.mock('../dependency');
const mockedDependency = jest.mocked(dep);
it('should do what I need', () => {
mockedDependency.mockReturnValueOnce('return');
});
Here's what I did with jest#24.8.0 and ts-jest#24.0.2:
source:
class OAuth {
static isLogIn() {
// return true/false;
}
static getOAuthService() {
// ...
}
}
test:
import { OAuth } from '../src/to/the/OAuth'
jest.mock('../src/utils/OAuth', () => ({
OAuth: class {
public static getOAuthService() {
return {
getAuthorizationUrl() {
return '';
}
};
}
}
}));
describe('createMeeting', () => {
test('should call conferenceLoginBuild when not login', () => {
OAuth.isLogIn = jest.fn().mockImplementationOnce(() => {
return false;
});
// Other tests
});
});
This is how to mock a non-default class and it's static methods:
jest.mock('../src/to/the/OAuth', () => ({
OAuth: class {
public static getOAuthService() {
return {
getAuthorizationUrl() {
return '';
}
};
}
}
}));
Here should be some type conversion from the type of your class to jest.MockedClass or something like that. But it always ends up with errors. So I just used it directly, and it worked.
test('Some test', () => {
OAuth.isLogIn = jest.fn().mockImplementationOnce(() => {
return false;
});
});
But, if it's a function, you can mock it and do the type conversation.
jest.mock('../src/to/the/Conference', () => ({
conferenceSuccessDataBuild: jest.fn(),
conferenceLoginBuild: jest.fn()
}));
const mockedConferenceLoginBuild = conferenceLoginBuild as
jest.MockedFunction<
typeof conferenceLoginBuild
>;
const mockedConferenceSuccessDataBuild = conferenceSuccessDataBuild as
jest.MockedFunction<
typeof conferenceSuccessDataBuild
>;
As of Jest 24.9.0 here is how you can mock and correctly type both your Class/Object/function and Jest properties.
jest.MockedFunction
jest.MockedClass
What we would like for a typed mock is that the mocked object type contains the union of the mocked object type and the type of Jest mocks.
import foo from 'foo';
jest.mock('foo');
const mockedFoo = foo as jest.MockedFunction<typeof foo>;
// or: const mockedFooClass = foo as jest.MockedClass<typeof FooClass>;
mockedFoo.mockResolvedValue('mockResult');
// Or:
(mockedFoo.getSomething as jest.MockedFunction<typeof mockedFoo.getSomething>).mockResolvedValue('mockResult');
As you can see, you can either manually cast what you need or you'll need something to traverse all foo's properties/methods to type/cast everything.
To do that (deep mock types) you can use jest.mocked() introduced in Jest 27.4.0
import foo from 'foo';
jest.mock('foo');
const mockedFoo = jest.mocked(foo, true);
mockedFoo.mockImplementation() // correctly typed
mockedFoo.getSomething.mockImplementation() // also correctly typed
I have found this in #types/jest:
/**
* Wrap a function with mock definitions
*
* #example
*
* import { myFunction } from "./library";
* jest.mock("./library");
*
* const mockMyFunction = myFunction as jest.MockedFunction<typeof myFunction>;
* expect(mockMyFunction.mock.calls[0][0]).toBe(42);
*/
Note: When you do const mockMyFunction = myFunction and then something like mockFunction.mockReturnValue('foo'), you're a changing myFunction as well.
Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jest/index.d.ts#L1089
The top rated solution by Artur Górski does not work with the last TS and Jest.
Use MockedClass
import SoundPlayer from '../sound-player';
jest.mock('../sound-player'); // SoundPlayer is now a mock constructor
const SoundPlayerMock = SoundPlayer as jest.MockedClass<typeof SoundPlayer>;
A recent library solves this problem with a babel plugin: https://github.com/userlike/joke
Example:
import { mock, mockSome } from 'userlike/joke';
const dep = mock(import('./dependency'));
// You can partially mock a module too, completely typesafe!
// thisIsAMock has mock related methods
// thisIsReal does not have mock related methods
const { thisIsAMock, thisIsReal } = mockSome(import('./dependency2'), () => ({
thisIsAMock: jest.fn()
}));
it('should do what I need', () => {
dep.mockReturnValueOnce('return');
}
Be aware that dep and mockReturnValueOnce are fully type safe. On top, tsserver is aware that depencency was imported and was assigned to dep so all automatic refactorings that tsserver supports will work too.
Note: I maintain the library.
This is ugly, and in fact getting away from this ugliness is why I even looked at this question, but to get strong typing from a module mock, you can do something like this:
const myDep = (require('./dependency') as import('./__mocks__/dependency')).default;
jest.mock('./dependency');
Make sure you require './dependency' rather than the mock directly, or you will get two different instantiations.
For me this was enough:
let itemQ: queueItemType
jest.mock('../dependency/queue', () => {
return {
add: async (item: queueItemType, ..._args: any) => {
// then we can use the item that would be pushed to the queue in our tests
itemQ = item
return new Promise(resolve => {
resolve('Mocked')
})
},
}
})
Then, whenever the add method is called it will execute this code above instead of pushing it to the queue, in this case.
With TypeScript 2.8 we can do like this with ReturnType:
import * as dep from "./depenendency"
jest.mock("./dependency")
const mockedDependency = <jest.Mock<ReturnType<typeof dep.default>>>dep.default
it("should do what I need", () => {
mockedDependency.mockReturnValueOnce("return")
})

Categories

Resources