Testing a Jest function that returns another function containing window.location.href

Trying to create a test case for the following function: The expected behavior is that if a successPath is provided, then onSignInSuccess should redirect to it.

export const onSignInSuccess = ( data ) => {
 return ( ) => {
  global.location.href = data?.detail?.data?.successPath;
 }
}

What I have attempted so far but encountered issues:

const data = { detail : { data: { redirectPage: true, successPath: 'test.com' } } }
onSignInSuccess( data )()
expect( jest.fn() ).toHaveBeenCalledWith( 'test.com' )
javascriptfunctionjestjs

Answer №1

After cleverly using a mock of window.location.href, I was able to find the solution.

it( 'should navigate to designated successPath if specified', ()=>{
  global.window = Object.create( window );
  const url = 'http://test.com';
  Object.defineProperty( window, 'location', {
    value: {
      href: url
    }
  } );
  const data = { detail : { data: { redirectPage: true, successPath: 'test.com' } } }
  onSignInSuccess( data )()
  expect( global.location.href ).toBe( 'test.com' )
} );

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

Converting PHP variables to JavaScript variables: A step-by-step guide

I'm trying to figure out the most efficient method for retrieving PHP variables using AJAX and then transforming them into JavaScript variables. Imagine I have the following code in my PHP file: echo $total; echo $actual; Edit: JSON echo json_enco ...

javascriptphpjqueryajax

When attempting to seed, the system could not locate any metadata for the specified "entity"

While working on a seeding system using Faker with TypeORM, I encountered an error during seeding: ...

javascripttypescriptnestjstypeormfaker

:after pseudo class not functioning properly when included in stylesheet and imported into React

I am currently utilizing style-loader and css-loader for importing stylesheets in a react project: require('../css/gallery/style.css'); Everything in the stylesheet is working smoothly, except for one specific rule: .grid::after { content: ...

javascriptcssreactjswebpack

Context Provider executing SetInterval twice

For some reason, the below code in global.js is running twice when I run my react app, but I can't figure out why. I have used setInterval to test, and the intervals are always running two times. Perhaps I am not initializing correctly. Even after rem ...

javascriptreactjs

Discovering a locator based on the initial portion of its value

Here's a piece of code that is used to click on a specific locator: await page.locator('#react-select-4-option-0').click(); Is there a way to click on a locator based on only the initial part of the code, like this: await page.locator(&apos ...

javascripthtmltypescriptplaywrightpartial

Enhancing Graphics with Anti Aliasing in Three.js and WebGL

While spinning my model with an orbiter, I am experiencing some issues with anti-aliasing. Currently, I am using the following renderer: renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true, antialias: true }) ...

javascript3dthree.js

Issue: Node Sass 8.0.0 is not compatible with the version ^4.0.0

I encountered an error when starting a React app with npm start. How can I resolve this issue? ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneO ...

javascriptnode.jsreactjsnpmnode-sass

Access information stored within nested JSON objects on a local server

After creating a test page, this is the structure that I have set up: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <title>Get JSON Value</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

javascriptjson

What is the best way to use CSS to ensure that dynamic, data-driven characters can be properly displayed within a div

I'm in the process of updating a data-centric website that relies on information from an automated database engine. In the HTML, there's a fixed-size button containing text pulled from the database. I'm looking to incorporate some CSS styles ...

javascriptjqueryhtmlcss

The connection to Cordova.js is established, but the deviceready event is not

I've included cordova.js in my project, called app.initialize();, but for some reason deviceready event is not being triggered. Any ideas on what might be causing this issue? Here's the JavaScript code: var app = { initialize: function() { ...

javascripthtmlcordova

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

javascriptphpjqueryhtmlajax

Accessing data from a CD-ROM or DVD through a web browser

I am currently working on developing a web application for a friend that will enable users to simply click a button to upload all the content from the CD-ROM or DVD they have inserted directly to a server. It's not feasible to rely on the standard br ...

javascripthtmlappletcdcd-rom

Obtaining metadata from Youtube videos with Javascript and HTML5

Is there a way to fetch YouTube video data with Javascript and HTML5? If so, could you provide some helpful resources or links? ...

javascripthtmlmetadata

The 'id' property cannot be accessed because the data has not been retrieved successfully

After loading my App, the data from Firebase is fetched in componentDidMount. I am currently passing postComments={comments} as a prop. However, before this happens, my app crashes with Cannot read property 'id' of undefined on line const c ...

javascriptreactjs

Three.js is capable of displaying a scene background, but it does not currently show any

I feel like I'm at my wit's end. I've been struggling to make anything render in this simple three.js program and it's driving me insane. I've tried everything - adding cubes, copying geometries, adjusting lights, moving the camera ...

javascriptthree.js

Implementing a Preloader in a React Web App

I am looking to implement a preloader in my React application because it takes a long time to load. I want the preloader to automatically render until all the contents of my application are fully ready to be loaded. Is it possible to achieve this? I could ...

javascriptreactjs

Error message: The function r is not defined - Issue with Google Sign in on React app

I have successfully implemented Google Sign In for my react app during development, but I am facing an issue with it in the production environment. The npm module that I am using for Google authentication is available at https://www.npmjs.com/package/reac ...

javascriptreactjsgoogle-signin

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

I'm encountering an issue where I receive an empty object in req.body when submitting my HTML form. This problem persists whether testing in Postman or directly submitting the form from localhost in the browser. Upon logging it in the node console, t ...

javascripthtmlnode.jsexpress

Can the functionality of two-way data binding be achieved in Angular without utilizing ng-model and ng-bind?

During an interview, I was presented with this question which sparked my curiosity. While I have a foundational understanding of AngularJS and its ability to enable two-way data binding using ng-model and ng-bind, I am interested in exploring alternative ...

javascriptangularjs

Is it possible that the passing of Form Serialize and list to the controller is not functioning properly?

i am struggling with the following code in my controller: public ActionResult SaveWorkOrder(DTO_WorkOrder objWork, List<DTO_PartsWO> listTry) { //something } here is my model : public class DTO_WorkOrder { public string Id { get; set; ...

javascriptc#jqueryajaxmodel-view-controller