Is it feasible to mock a defined function in Typescript for a unit test scenario?

Currently, I am working on typescript code that compiles into javascript, gets bundled with rollup, and is utilized by a framework. This framework exposes a library to me in the global scope, taking the form of a function:

    fun({
      prop1: number,
      ...
    });

I do not want to include this library in my bundled JavaScript as it is already provided by the framework. Having different versions of the library could potentially lead to unexpected bugs. In my opinion, it would be safer and more straightforward to use the library supplied by the framework.

After some research, I believe the declare keyword serves this purpose. So, I added the following line in the same file where I call fun:

export declare function fun(input: unknown): void;

Although my code now compiles successfully, I am facing challenges when it comes to unit testing. When attempting to test the code that calls fun, Jasmine reports an error saying: 

ReferenceError: fun is not defined

While I understand the reason for this error, I am unsure how to circumvent it. I tried using sinon to stub fun, but encountered a similar issue during testing with Jasmine.

The solution I came up with involves adding an if statement around the call to fun in order to skip it during testing - a workaround that I'm not fond of.

I am seeking advice on how to properly stub fun so that I can execute the code calling it and verify that the correct properties are being passed. Alternatively, is there a way to create a mock version of fun that can be excluded from the transpiled javascript for testing purposes, yet does not exist in production? Due to module functionality, I am doubtful about this possibility, but I am open to exploring any suggestions.

typescriptunit-testingjasminesinonrollupjs

Answer №1

This method has proven to be effective for me. If anyone knows of a superior or simpler approach, I am open to learning about it.

    // within a certain file (ensure there is an import/export in order for it to compile correctly)
    declare global {
      interface Window {
        fun: (input: unknown) => void;
      }
    }
    
    // during the testing phase
      beforeEach(() => {
        sandbox = sinon.createSandbox();
        window.anime = sandbox.stub();
      });
    
      afterEach(() => {
        window.anime = ... // This step is optional. Restore it to its original state
      });
    
    // somewhere in a test case
       expect((window.fun as SinonStub).callCount).toBeGreaterThan(0);

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

An error encountered while trying to utilize the npm convert-units package within an Ionic 4 application

In my Ionic 4 app, I am utilizing version 2.3.4 of the npm package called convert-units. To install this package in my Ionic 4 application, I used the CLI command: npm i convert-units --save However, upon importing the library with import { convert } fro ...

angulartypescriptionic4

When an import is included, a Typescript self-executing function will fail to run

Looking at this Typescript code: (()=> { console.log('called boot'); // 'called boot' })(); The resulting JavaScript is: (function () { console.log('called boot'); })(); define("StockMarketService", ["require", "exp ...

javascripttypescript

Arranging Alphanumeric Characters in Angular in Ascending Order

I am trying to sort a list of characters first, followed by alphanumeric values. Here is what I have: [Austria , Germany , 123aed , 234eds] This is my current sorting attempt: obj.sort((a,b) => { if ( (isNaN(a.text) && isNaN(b.text)) || ...

angulartypescript

Performing unit tests in Angular 2 by utilizing a host component

Currently, I am diving into the world of unit testing in Angular2 v2.0.0. To kickstart my journey, I decided to utilize angular-cli to scaffold a project and execute unit tests using 'ng test'. The CLI gracefully generates a sample component alon ...

unit-testingangularkarma-runner

Could I potentially pause and wait for a subscription in Angular?

I'm looking to display a list of posts similar to this: Post List In order to indicate which post is favorited by a user, I need to retrieve data from two different collections in my MongoDB database. The ngOnInit function in my post-list.component.t ...

angulartypescriptrxjsmean-stack

What is the best way to reset the testing subject between test cases using Jest and TypeScript?

I'm currently utilizing typescript alongside jest for unit testing. My goal is to create a simple unit test, but it consistently fails no matter what I try. Below is the snippet of code in question: // initialize.ts let initialized = false; let secre ...

typescriptunit-testingjestjs

Dynamic URL used in TRPC queries`

Is there a way to query a single post in TRPC and Next JS based on a dynamic url without using SSR or SSG? I have tried adding as string to router.query.id but encountered a TRPC error (only happening during the first load) because router.query.id is ini ...

typescriptnext.jstrpc.iot3

Something seems off with React tests using jest and enzyme

I am currently working on setting up unit tests for React components using Jest and enzyme. I have noticed a strange behavior in my testing setup. When the component being tested is located within the test file itself, everything functions properly. Howeve ...

reactjsunit-testingjestjsenzyme

Struggling to troubleshoot issues with asynchronous tasks in Angular? Encountering timeouts while waiting for elements on an Angular page? Learn

Edit: I have identified the source of my issue with guidance from @ernst-zwingli. If you are facing a similar error, one of his suggested solutions might be beneficial to you. My problem stems from a known Protractor issue itself. For those who suspect the ...

javascriptangularjasmineprotractor

Is AWS CDK generating nested cdk.out directories during synthesis?

Whilst working on my AWS CDK project for educational purposes, I found myself immersed in learning TypeScript, node.js, npm, and all related concepts simultaneously. Despite the mishap that occurred, requiring me to restart from the Github repository rathe ...

typescriptamazon-web-servicesnpmaws-cdk

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

Utilizing Vue3 and naive ui for front-end development has been a challenge for me as I primarily focus on back-end development and lack expertise in front-end technologies. To enhance user interaction, I incorporated naive ui’s BasicTable along with an ...

javascripthtmltypescriptvue.jsvuejs3

Exploring the world of functional programming in Java can be a rewarding experience, especially

I am seeking a method to define generic computation on a data set and have the compiler alert me if there are any errors. Having experience with TypeScript, I have seen that you can achieve something like this: /** * Type inferred as: * Array<{ * ...

javatypescriptgenericscompiler-errorstype-inference

Angular production application is experiencing issues due to a missing NPM package import

Objective I am aiming to distribute a TypeScript module augmentation of RxJS as an npm package for usage in Angular projects. Challenge While the package functions correctly in local development mode within an Angular application, it fails to import pro ...

typescriptnpmwebpackangular-cling-packagr

Is it possible to set up tsc to compile test specifications specifically from a designated directory?

I have been working on integrating e2e tests into an Angular project that was not originally set up with @angular-cli, so I have been manually configuring most of it. Currently, I am trying to define a script in the package.json file to transpile only the ...

jsonangulartypescript

Silence in Angular NGRX Effects

I am currently utilizing ngrx Effects to send a http call to my server, but for some reason the effect is not triggered. My goal is to initiate the http call when the component loads. I have tried using store.dispatch in ngOnInit, however, nothing seems to ...

angulartypescriptrxjsngrxngrx-effects

The not-null constraint is violated in the "id" column because of a null value when using Sequelize Typescript

My Database Setup Journey Recently, I embarked on a database adventure where I decided to use Sequelize-Typescript to assist me with all the heavy lifting in terms of database operations. The first step was creating a table called uma_tbl_users, and here ...

typescriptpostgresqlexpresssequelize-typescript

Having trouble building the React Native app after adding react-native-vector icons?

A recent project I've been working on involved adding react-native-vector-icons using react-native 0.63.4. However, during the build process, I encountered an error when running the command npx react-native run-ios in the terminal. The warnings/errors ...

xcodetypescriptreact-native

Having trouble utilizing the DatePicker component in my react native application

I've encountered an issue while using DatePicker in react native. Whenever I try to use it, an error pops up saying: "render error a date or time must be specified as value prop". Here is the link to my repository: my github repository const [date, se ...

javascriptreactjstypescriptreact-native

Is it possible to deactivate the error message related to "Unable to ascertain the module for component..."?

I recently incorporated a new component into my TypeScript2+Angular2+Ionic2 project. Right now, I have chosen not to reference it anywhere in the project until it is fully developed. However, there seems to be an error thrown by Angular/ngc stating "Cannot ...

angularjsangulartypescriptionic-framework

Challenges encountered when retrieving parameters from union types in TypeScript

Why can't I access attributes in union types like this? export interface ICondition { field: string operator: string value: string } export interface IConditionGroup { conditions: ICondition[] group_operator: string } function foo(item: I ...

javascripttypescript