Testing a TypeScript function with Jest by mocking a function that is invoked from a separate file

In my code, there is a function called processCosts located in the file prepareStatement.ts. This function makes a call to another function named calculatePrice, which is imported from coreLogic.ts.

Within my test file reports.integration.ts, I have imported processCosts, but I need to mock the behavior of calculatePrice, which is being called by processCosts. To achieve this, I created a new file coreLogic.ts within a __mocks__ folder with the following content:

export const calculatePrice = jest.fn(() => {});

Next, in my test file, outside of the it(...) block but within the describe(...) block, I added the line:

jest.mock('../statements/prepareStatement');

Finally, the test case itself looks like this:

it('should calculate processCost and be 4 times the value returned by calculatePrice', async () => {
    (calculatePrice as jest.Mock).mockImplementationOnce(() => 100.00);
    expect(processCost).to.equal(400.00); // processCost will be 4 times the value returned by calculatePrice
}

However, when running the code, I encountered the error message:

TypeError: coreLogic_1.calculatePrice.mockImplementationOnce is not a function

I am seeking guidance on where I may have made a mistake. It seems that others who have attempted a similar approach are calling the method they are mocking directly in their test cases, as opposed to within another imported function. After debugging the code, the issue appears to be related to the following line:

(calculatePrice as jest.Mock).mockImplementationOnce(() => 100.00);

Answer №1

After some tweaking, I found the solution. By moving the jest.mock(...) code from inside the describe(...) and it(...) functions to the top level of the file, I was able to get everything functioning smoothly.

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

Is it possible to set the initial value of useState() as null and later assign it an object value?

https://i.sstatic.net/TjAbz.png Looking at the image, I am attempting to set up a React state hook for the alert system on my website. Initially, I want no alerts to be displayed. However, when a user clicks a button, I want to show a success alert with a ...

The best approach to effectively integrate TypeScript and Fetch is by following the recommended guidelines

Currently, I am in the process of learning React and Typescript simultaneously. On the backend side, I have a server set up with ApiPlatform. For the frontend part, my goal is to utilize fetch to either create or update a Pokemon along with its abilities. ...

When running the test, a "is not defined" ReferenceError occurs in the declared namespace (.d.ts) in ts-jest

When running typescript with ts-jest, the application functions properly in the browser but encounters a ReferenceError: R is not defined error during testing. The directory structure: |--app | |--job.ts |--api | |--R.d.ts |--tests | |--job.test.ts ...

What could be causing the import alias issue in the latest version of Next.js, version 12

Below are my CompileOptions: { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": false, "skipLibCheck": tr ...

Ionic 3 Local Notification spamming a particular page with excessive pushes

Recently starting out with Ionic, I encountered an issue while developing a basic app that should display a specific page by opening a Local Notification. The problem arises when I create multiple notifications – after clicking on the second notification ...

How can I create an input field in MUI that restricts input to letters, numbers, and dashes

Is there a way to configure an MUI input field so that it only accepts letters, numbers, and dashes while excluding spaces and symbols such as (*&^%$#@!,.<>{}[])? Specifically, I want to allow characters that wouldn't disrupt a URL, like . Tha ...

What is the best way to emphasize when the path matches exactly with '/'?

Is there a way to highlight the path only when it exactly matches '/'? Currently, even on 'Page 2', the 'Home' link is still highlighted. Check out the plunker here .active { color: red; } <a routerLinkActive="active" r ...

Having trouble getting Next.js 404 page to function properly with the .tsx extension?

My latest project involved creating a Next.js application using regular JavaScript, which led to the development of my 404 page. 404.js import { useEffect } from "react"; import { useRouter } from "next/router"; import Link from " ...

Is it necessary for a method to be async if browser.wait is used within it?

Just starting out with typescript, so go easy on me. I'm currently refactoring some selenium tests using protractor and angular. I've created a method to wrap browser.wait(ExpectedConditions.presenceOf(element)); My tests were passing fine wh ...

Utilizing the NPM package as a JSX Component is prohibited due to type errors

I've been encountering some unusual type errors in my TypeScript project with certain packages. For example: 'TimeAgo' cannot be used as a JSX component. Its instance type 'ReactTimeago<keyof IntrinsicElements | ComponentType<{} ...

Challenges with integrating Firebase with Ionic 3

After attempting to install firebase in my ionic 3 project using the command npm install firebase @angular/fire, I encountered numerous errors. It seems that there may be a compatibility issue with my version of Ionic (3) because the errors disappear when ...

Angular 2: Sending an HTTP GET request with custom headers and parameters

I have been encountering difficulties while attempting to retrieve data from a Stardog triple store into Angular. Despite successfully accessing the service using curl with matching headers and parameters, I am unable to replicate this functionality with ...

Securing redirection in WebPart using Azure AD: Best practices

I've successfully created a Sharepoint Webpart with a straightforward goal: authenticate users on an external website embedded within Sharepoint. This external site utilizes Azure AD for user logins. However, my current implementation has a significa ...

Incorporate a personalized Cypress function for TypeScript implementation

I'm in the process of developing a custom cypress command that will enable me to post a file using formData, as the current cy.request does not yet support formData. For the actual POST operation, I am utilizing request-promise-native. To begin with ...

Utilizing Partial Types in TypeScript Getter and Setter Functions

Within the Angular framework, I have implemented a component input that allows for setting options, specifically of type IOptions. The setter function does not require complete options as it will be merged with default options. Therefore, it is typed as Pa ...

Discovering and tallying a particular term within a text via JavaScript - a guide

In my current project, I have extracted an XML response and converted it into readable text. Here is a snippet of the converted XML: let XMLText = '<?xml version="1.0" encoding="utf-8"?> <BlockList> <CommittedB ...

Updating Angular 2 template based on specific conditions of model values

I want to update a view only when the total votes reach a number that is a multiple of ten. I am incrementing a random element in an array called rows every 10 milliseconds, ultimately adding up to the total number of votes. Is there a simple way in angula ...

What is the best way to transform a JavaScript object into an array?

Here is the information I have: {product_quantity: {quantity: 13, code: "AAA", warehouse: "1000",}} The product_quantity field is part of a JSON object in a MongoDB database. I am looking to convert it into this format: {"produ ...

What is the best way to switch the CSS class of a single element with a click in Angular 2

When I receive data from an API, I am showcasing specific items for female and male age groups on a webpage using the code snippet below: <ng-container *ngFor="let event of day.availableEvents"> {{ event.name }} <br> <n ...

Converting Typescript fat arrow syntax to regular Javascript syntax

I recently started learning typescript and I'm having trouble understanding the => arrow function. Could someone clarify the meaning of this JavaScript code snippet for me: this.dropDownFilter = values => values.filter(option => option.value ...