Tips for using jest toHaveBeenCalled with multiple instances

Currently, I am in the process of writing a test case for one of my functions. This function calls another function from a library, and I am attempting to mock this function (saveCall). Below is a snippet of the sample code in question:

import { Call } from './somefolder/call';
class Demo {
  var testIt = (params: any) => {
    ---- // Some other code
    let call = new Call(params);
    call.saveCall();
    ---- // Some other code
  }
 return {testIt: testIt};
}

Furthermore, here is my approach to writing a unit test case for the function:

import { Call } from './somefolder/call';
var demo = new Demo();
test("Test it", () => {
    let call = new Call({} as any);
    let spyIt = jest.spyOn(call, 'saveCall').mockImplementation(()=>{console.log('here')});
    demo.testIt();
    expect(spyIt).toHaveBeenCalled(); // Throws error expect(jest.fn()).toHaveBeenCalled()
    
});

Currently, I am encountering an error with the

expect(jest.fn()).toHaveBeenCalled()
statement. It seems like the error is occurring because the instance of the call object in the test file differs from the one in the Demo class. This discrepancy is causing the spyOn function to be unable to determine whether the function has been called or not. I did attempt to mock the entire Call.ts file, but the error persists.

Given this situation, my query is how can I effectively create a mock and verify whether saveCall() has been called without altering the implementation of the testIt function.

Answer №1

Utilizing the jest.mock utility function to create a mock of the Call class and then verifying the functionality on an instance of the mocked class.

import { Call } from './somefolder/call';
import { Demo } from './Demo';

jest.mock('./somefolder/call'); // mock all named export items

describe("Demo", () => {
  let demo: Demo;
  let CallMocked: jest.Mock<Call>; // define type for mocked class

  beforeEach(() => {
    CallMocked = Call as any; // Now, Call is a mocked class
    demo = new Demo();
  });

  test("Testing", () => {
    demo.testIt();
    expect(CallMocked.mock.instances[0].saveCall).toHaveBeenCalled(); // verifying the mock instance
  });
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to expand the dimensions of a Popup while including text

I am using a bootstrap modal popup that contains a Treeview control in the body. The issue arises when the node's text width exceeds the popup's width, causing the text to overflow outside of the popup. Is there a way to dynamically adjust the ...

Is there a way to save a base64 image to an excel file?

I need assistance with exporting Excel Charts from NVd3 using Angularjs. Here is the code I have been trying: (jsfiddle) <button id="myButtonControlID">Export Table data into Excel</button> <div id="divTableDataHolder"> <table> ...

What is the best way to format a condensed script into a single line?

There are times when the script in the web browser is packed into one line like function a(b){if(c==1){}else{}}. I have attempted to locate something that would display it in a more normal format. function a(b) { if(c==1) { } else { } } Howev ...

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

Take a look at the code I've provided below : HTML : <input type="checkbox" name="xyz[1][]" id="sel_44" style="margin:2px;" value="12345" onclick="myClick(this)"> Javascript : <script> $('#sel_44').attr("checked", true); < ...

Utilizing external imports in webpack (dynamic importing at runtime)

This is a unique thought that crossed my mind today, and after not finding much information on it, I decided to share some unusual cases and how I personally resolved them. If you have a better solution, please feel free to comment, but in the meantime, th ...

Attempting to modify read-only properties is prohibited in strict mode within the context of [background: url({{XXX}}) no-repeat center center

I encountered an issue in Edge, but everything works fine in Chrome. I can't figure out what's causing the problem... <div class="container-fluid project_img" style="background: url({{_project.images.web}}) no-repeat center center;"> ...

Solving issues with Angular4 Router changes

I'm attempting to chain the router resolver for my application. Below are my Router options: { path: '', component: AdminComponent, resolve: [ SessionResolve, LocaleResolve ] } The desired flow is to first call S ...

Eliminate the presence of core-js in the nextjs bundle

Currently, I am tackling the challenge of minimizing bundle sizes in my Next.js project. One particular aspect that caught my attention is the inclusion of a core-js bundle for polyfills. This adds an extra 50KB to the size of the main bundle, which I aim ...

Even after I delete and refresh, the persistent cookie sticks around

I attempted to delete the user's authentication cookie using $cookieStore.remove('.ASPXAUTH'). Despite this, when I refresh the page, the cookie persists and the user can still access the page instead of getting redirected to the login page. ...

Steps to add text to a bar chart in morris.js

I have a morris.js bar graph and I want to display the count on top of each bar. After checking the morris.js bar documentation, I couldn't find a solution for it. When hovering over the bars, it should show the value, but I specifically need to show ...

Is it possible to add a vertical scrollbar to the vertical navigation pills on a Bootstrap

Is it possible to create a vertical scroll bar for my nav pills when they exceed the screen size? /* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== */ .nav-pills-custom .nav-link { c ...

Creating trendy designs with styled components: A guide to styling functional components as children within styled parent components

I am looking to enhance the style of a FC styled element as a child inside another styled element. Check out the sandbox example here const ColorTextContainer = styled.div` font-weight: bold; ${RedBackgroundDiv} { color: white; } `; This resul ...

Guide on transmitting information to an API with Vue.js

Here is an example of my API call: this.$http.post("{{ route('shop.checkout.save-order') }}", {'_token': "{{ csrf_token() }}"}) .then(function (response) { if (response.data.success) { if (response.data.redirect_url) { windo ...

What is the method to display just the final 3 characters within a paragraph?

Is there a way to display only the last three characters of a string using either a method or a string method? I consistently have a 13-digit number, but I specifically require showing only the final three digits. Appreciate any assistance provided. Than ...

Question about TypeScript annotations: arrays containing key-value pairs

Is there an explanation for why this issue occurs in VSCode? interface Point { x: number; y: number; } let grid: [key: number, value: [key: number, value: Point]]; // ... // Accessing an object of type number | [key: number, value: Point] var c ...

Troubles with the compatibility of javascript and jquery's multiselect plugin

I've been utilizing the multiselect API to create a dropdown with multiple select options. This is my HTML code: <select id="options" multiple="multiple"></select> And this is my JS code: render:function(){ // $('#viewTemp& ...

What is the proper way to implement JQuery within a constructor function contained in a JavaScript namespace?

Yesterday I ran into a problem when asking about using JQuery inside a JavaScript constructor function within a namespace. There was a bug in my code that caused me to get the answer to the wrong question. var NS=NS||{}; NS.constructor=function() { t ...

Error: Authorization token is required

For email confirmation, I am utilizing JWT. An email is sent to the user with a URL containing the token. Here's an example of the URL received by the user: http://localhost:3000/firstlogin?acces_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI ...

Scrollbar becomes inactive following the loading of AJAX content

Having an issue with loading a div using Ajax. The div loads, however the scrollbar within it stops working afterwards. In Main.html, I load content from other HTML files like so: <div id="content1" > </div> The content is loaded as follows: ...

Error encountered with AngularJS code when attempting to load content from another page using ajax

I'm currently tackling a challenge with AngularJs and php. Whenever I try to load content from another page, AngularJs seems to stop working. Let me provide you with a sample code snippet to illustrate my issue. main-page.php <div id="form-secti ...