Broadening Cypress.config by incorporating custom attributes using Typescript

I'm attempting to customize my Cypress configuration by including a new property using the following method:

Cypress.Commands.overwrite('getUser', (originalFn: any) => {
    const overwriteOptions = {
        accountPath: `accounts/${options.accountPath}`,
    };

    return originalFn(overwriteOptions).then(response =>
        Cypress.config({
            authUserString: generateAuthUserString(response.email, response.password),
        })
    );
});

However, I am encountering the following error:

No overload matches this call.
  Overload 1 of 4, '(key: "url" | "browser" | "autoOpen" | "browserUrl" | "clientRoute" | "cypressEnv" | "isNewProject" | "isTextTerminal" | "morgan" | "parentTestsFolder" | "parentTestsFolderDisplay" | ... 84 more ... | "cypressBinaryRoot"): string | ... 16 more ... | { ...; }', gave the following error.
    Argument of type '{ authUserString: any; }' is not assignable to parameter of type '"url" | "browser" | "autoOpen" | "browserUrl" | "clientRoute" | "cypressEnv" | "isNewProject" | "isTextTerminal" | "morgan" | "parentTestsFolder" | "parentTestsFolderDisplay" | ... 84 more ... | "cypressBinaryRoot"'.
  Overload 2 of 4, '(Object: TestConfigOverrides): void', gave the following error.
    Argument of type '{ authUserString: any; }' is not assignable to parameter of type 'TestConfigOverrides'.
      Object literal may only specify known properties, and 'authUserString' does not exist in type 'TestConfigOverrides'.ts(2769)

Is there a way to successfully add custom properties to the Cypress config while working with Typescript?

typescripttestingcypresscypress-custom-commands

Answer №1

It's unnecessary to utilize Cypress.config() in this scenario; instead, you should make use of Cypress.env(), which allows for easy extension.

Inserting items into the configuration during testing will not have any impact because the internal Cypress code does not recognize your customized property.

Therefore, if you intend to employ it explicitly in your tests, Cypress.env() is the optimal choice.

Another issue with Cypress.config({...}) is that it would completely overwrite all existing configurations, even if it were functional.

The correct approach is to define a key and value: Cypress.config('key', value).

The same principle applies to Cypress.env('key', value)

Cypress.Commands.overwrite('getUser', (originalFn: any) => {
  const overwriteOptions = {
    accountPath: `accounts/${options.accountPath}`,
  };

  return originalFn(overwriteOptions).then(response =>
    Cypress.env('authUserString', generateAuthUserString(response.email, response.password))
    })
  );
})

it('utilizes authUser value', () => {
  cy.getUser({accountPath: 'admin'})
    .then(() => {
      expect(Cypress.env('authUserString')).to.eq('authorized')
    })
})

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

Tips for effortlessly incorporating a new chip while maintaining a neat arrangement and ensuring button alignment

I am looking to enhance my website by adding chips with new tags in a neatly organized manner. Specifically, I want each new chip to be positioned next to the previous one and have the add-button shift to the right side, always staying in front of the last ...

angulartypescriptionic-frameworkionic2

Tips for transferring an excel file to a C# controller from Angular 4 within Visual Studio 2017

I'm working on a web application where I need to import an Excel file and send it to the server-side controller. On the server-side, I am utilizing EPPlus for this task. Can anyone provide guidance on how to accomplish this? I would greatly appreci ...

excelangulartypescriptvisual-studio-2017epplus

An issue arises when trying to update state using useState in TypeScript

In our system, we have a state that contains an array of objects: interface Product { id: number; status: boolean; color: string; price: number; } const productList: Product[] = [ { id: 1, status: true, color: 'yellow', ...

reactjstypescriptreact-hooksuse-state

Leverage JSON for simulating model data in Groovy/Grails applications

Currently developing the user interface for an application, however the model data is not accessible at this time. I am interested in creating mock models using JSON that will align with the actual data structure I will be receiving in the future. The goal ...

jsontestinggrailsgroovymocking

Prohibit the use of explicit type parameters or limit the union type parameters to enhance the safety of the types

When the getValues() function is called without explicit type parameters, the Typescript code functions correctly. However, calling it with explicit type parameters can result in errors (as seen in invocation getValues<'a' | 'b' | &a ...

typescripttypescript-generics

Using Angular 2, NodeJS, and Mongoose to send data from an Angular 2 frontend to a NodeJS backend REST API. However, encountering an issue where the Node API logs show that the OPTIONS

I am facing an issue with sending data from my Angular2 frontend API to the backend client, which is built using NodeJS and mongoose. When I inspect the data being sent on the Angular2 client through console.log, I can see that the correct values are being ...

node.jsangulartypescriptmongoose

Error: Unable to iterate through posts due to a TypeError in next.js

Hi there, this is my first time asking for help here. I'm working on a simple app using Next.js and ran into an issue while following a tutorial: Unhandled Runtime Error TypeError: posts.map is not a function Source pages\posts\index.tsx (1 ...

reactjstypescriptnext.js

How can I indicate separate paths for the identical dependencies listed in package.json?

Currently, I am in the process of working on an npm package that consists of an example directory designed to run and test the actual package. Within this example directory, I have re-integrated the parent package using "file:..". While this set ...

node.jstypescriptnpmnode-modules

Conceal a table if it has no content

I am dealing with 2 tables that contain various data sets. img01 If both of my tables happen to be empty, I would prefer them to be hidden. img02 Is it feasible to implement this in Angular? If you have a solution for me, I would be eager to give it a ...

angulartypescript

The interface 'children: string' does not share any properties with the type 'IntrinsicAttributes'.ts(2559)

When I export the component, the value from the input email does not appear as a VALUE property. How can I collect the text written in this exported component in my code? NOTE: I am working on developing a design system using STORYBOOK. export const Login ...

javascriptreactjstypescriptnext.jsfrontend

Methods for setting a global instance within a local function

Hello, I'm fairly new to using TypeScript and Angular2. Let me quickly explain what I'm trying to accomplish with my method. I have some hard-coded XML data that I need to parse into JSON format. Once parsed, each JSON object needs to be assigned ...

typescript

Steps for importing jQuery typings into TypeScript:1. First, install the jQuery

I've searched for similar questions, but haven't found one that matches my issue. Can someone help me figure out what to do next? In my Visual Studio project, I used package.json to download jquery typings into the node_modules folder: { "ver ...

javascriptjquerytypescripttypescript-typings

What could be causing the issue with my customized sorting in the Material-UI Data Grid component?

After integrating Material-UI's Data Grid Component with my API's JSON array, I had to create a RenderCell function to handle text overflow and include a button that directs Users to a different page. Additionally, I utilized the ValueGetter for ...

jsonreactjstypescriptsortingmaterial-ui

Error: The token 'export' in d3zoom is causing a syntax issue

I'm encountering issues with executing tests in Angular: ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {default as zoom} from "./zoom.js"; ...

angulartypescript

When running the test, the message "Unable to resolve all parameters for BackendService" is displayed

Upon executing the ng test command, the following error was displayed. This is my service specification: describe('BackendService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ { p ...

javascriptangulartypescript

Using setTimeout() and clearTimeout() alongside Promises in TypeScript with strict mode and all annotations included

Many examples of timer implementations using Promises in JavaScript seem overly complex to me. I believe a simpler approach could be taken. However, I am looking for a solution specifically tailored for TypeScript with the "strict": true setting and all ne ...

node.jstypescripttimerpromise

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

I'm currently working on creating a basic login form for users to access a website, where I plan to store their session data in a session cookie. The express-session documentation provides the following example for setting it up: app.post('/login ...

javascriptnode.jstypescriptexpresssession

Navigating through Dynamic URL Parameters with RouterLink in an Angular Application

Within my Angular 2 application, there exists a tab section where users can choose from a collection of separate yet contextually connected components. By clicking on one of these links, the corresponding component is loaded based on the routerLink definit ...

javascriptangulartypescriptrouterlink

Typescript error: the argument passed as type a cannot be assigned to the parameter of type b

In my programming interface, I have defined shapes as follows: type Shape = | Triangle | Rectangle; interface Triangle {...} interface Rectangle {...} function operateFunc(func: (shape: Shape) => void) {...} function testFunction() { const rectFun ...

javascripttypescript

Getting started with installing Bootstrap for your Next.Js Typescript application

I have been trying to set up Bootstrap for a Next.js Typescript app, but I'm having trouble figuring out the proper installation process. This is my first time using Bootstrap with Typescript and I could use some guidance. I've come across these ...

typescripttwitter-bootstrapnext.jsreact-bootstrap