Creating a library that relies on Cypress without the need to actually install Cypress

We have adopted the page object pattern in our testing and recently made the decision to move them into a separate npm-published library for reusability.

Considering the heavy nature of Cypress and potential version conflicts, we believe it's best not to install Cypress directly in the library. Instead, we list it among peerDependencies. To address typing issues (we use TS), I created some types for Cypress commands as shown below:

Options.ts

export interface Options {
    log: boolean;
    timeout: number;
    withinSubject: null | HTMLElement;
    includeShadowDom: boolean;
}

global.ts

import { Options } from './Options';
export declare namespace cy {
    function get(selector: string, options?: Partial<Options>): Cypress.Chainable<JQuery<HTMLElement>>;
    function find(selector: string, options?: Partial<Options>): Cypress.Chainable<JQuery<HTMLElement>>;
}
export declare namespace Cypress {
    interface Chainable<Subject> {
        find(selector: string, options?: Partial<Options>): Chainable<JQuery<HTMLElement>>;
        eq(index: number, options?: Partial<Options>): Chainable<JQuery<HTMLElement>>;
        next(selector?: string, options?: Partial<Options>): Chainable<JQuery<HTMLElement>>;
    }
}
export declare interface JQuery<Subject> {
}

However, when utilizing the library in our tests, nothing seems to be functioning correctly and an error keeps popping up:

Error: Webpack Compilation Error
'../path/file.js'
Module not found: Error: Can't resolve 'core-js/modules/es6.array.find' in 'path/dist/fileHoldingFolder'
  Parsed request is a module
  using description in file 'path/package.json' (relative path: 'dist/fileHoldingFolder')
    Field 'browser' doesn't contain a valid alias configuration
  *Here goes a long list of paths in node_modules*

(The library was included via npm link libname)

To create the library in TypeScript, I followed this guide. The only alteration I made was setting the target to 'ES2015' and adding stricter settings.

At this point, I'm running out of solutions and hoping that someone out there who has experience implementing similar setups can provide assistance. Any help would be greatly appreciated.

Answer №1

Figured it out on my own. All I had to do was include 'cypress' in the devDependencies section!

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

The method getManyAndCount() in TypeORM does not include related data in its return result

I'm completely new to TypeORM and NestJs. Currently, I am working on a project where I have an entity called VehicleModel which has a ManyToOne relationship with VehicleBrand. However, when I execute getManyAndCount() on my query, I am puzzled as to ...

Utilizing Azure CI to link with a confidential Bitbucket repository

I encountered an issue in my package.json file where a few dependencies were coming from a private Bitbucket repository. When using Azure CI to run npm install, I received the following error message: npm ERR! An unknown git error occurred npm ERR! comma ...

Leveraging animations in Angular2 that are defined outside of a component

I've recently put together a basic component @Component({ selector: 'saved-overlay', templateUrl: './saved-overlay.html', exportAs: 'saved-overlay', animations: [ trigger('inOut', [ transition ...

How come TypeScript does not generate an error when attempting to import a default export that does not exist?

As I work on converting my code from non-TypeScript CommonJS files to TypeScript ES6 modules, I encountered an issue with the import statements. Specifically, I needed to use import * as x instead of import x: The original snippet looked like this: const ...

Develop an Angular 6 application that utilizes an observable to monitor changes in a variable

I am working with Angular 6 and I need to monitor a variable for any changes and then stop or unsubscribe when the variable has a value. My initial thought was to use an Observable: myValue; // The variable that needs to be monitored myObservable = Obse ...

Breaking down the steps to flip between two images when clicked in Vue.js

I'm currently trying to implement a feature in Vue.js where images switch on click. The functionality I'm aiming for is as follows: Upon initial load, the image displays in black, then upon clicking/selecting it, the image transitions into a blu ...

The Allure Report runs successfully but encounters issues with data population when using Jasmine and Protractor

Currently, I am facing an issue with my Protractor project set up that incorporates Allure Reporting. Although the Allure Reporter successfully outputs the HTML file to the allure-report directory, when I attempt to view it in a browser, all I see is a "Lo ...

Encountering an error message stating "Property '@global' cannot be read from undefined - Issue with NPM linking MUI components"

I have developed a series of React components that wrap Material-UI components and have been bundled into an NPM module. The module functions correctly when installed using the remote package: npm install *name-of-package*, or through local installation: ...

It is essential for npm to automatically install peer dependencies in the parent project without overlooking them

I am currently facing an issue with publishing a react application, let's call it project-A, as an npm package. This project has several dependencies like material-ui, dompurify, recharts, and more. In another application, project-B ...

Converting JSON array to custom object array in TypeScript

As a newcomer to this area, please excuse any inaccuracies in my language. Don't hesitate to ask for more details if needed. I currently have some TypeScript interfaces: export interface Item { id: string type: string state: string } ex ...

Cannot use a 'string' type expression to index a 'Request<ParamsDictionary, any, any, Query>' type

Currently, my goal is to develop a middleware that can validate the input data in a request. export function validator(schema: Joi.ObjectSchema, key: string) { return function (req: Request, res: Response, next: NextFunction): void { try { Joi ...

Troubleshooting Typescript app compilation problem in a Docker environment

I am encountering a challenge while trying to build my typescript Express app using Docker. Surprisingly, the build works perfectly fine outside of Docker! Below is the content of my Dockerfile: FROM node:14-slim WORKDIR /app COPY package.json ./ COPY yarn ...

Transfer the data for 'keys' and 'input text' from *ngFor to the .ts file

I am facing difficulty in creating a string with dynamically generated keys from *ngFor and user input text. Let me provide some code to better explain my need. <th *ngFor="let column of Filter" > <tr>{{ column.name }}: <input type="{{c ...

Why isn't the parent (click) event triggered by the child element in Angular 4?

One of my challenges involves implementing a dropdown function that should be activated with a click on this specific div <div (click)="toggleDropdown($event)" data-id="userDropdown"> Username <i class="mdi mdi-chevron-down"></i> </d ...

ESlint is unable to parse typescript in .vue files

After using vue ui to build my project, here is the content of my package.json: "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-plugin-typescript": "^4.1.0", "@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-typescript": "^4.0.0", "eslint": "^5.1 ...

Discover the geolocation data for post code 0821 exclusively in Australia using Google Maps Geocoding

I'm having trouble geocoding the Australian postcode 0821. It doesn't seem to reliably identify this postcode as being located within the Northern Territory, unlike 0820 and 0822 which work fine. Here's an example of what I'm doing: ...

Set up JSBin on your local machine

I found instructions on this page for running JSBin locally. On my Mac, I have installed xcode 8.2. Now, when I run npm -v, it returns 3.10.9; and when I run node -v, it returns v7.2.1. After cloning the repository using git clone <a href="/cdn-cgi/l/ ...

Having trouble installing NestJS due to the error message: "ERR_INVALID_OPT_VALUE" with a clear explanation of "re readableHighWaterMark

I am trying to install NestJs/cli on my Ubuntu 16.4 system by running the command below: npm install -g @nestjs/cli However, I encountered an error while doing so: 87 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "@nestjs/cli" 8 ...

The TS-Mocha and Chai duo have encountered a hitch: a peculiar error message, TS2695, informing them that the left side of the

Software Versions: "ts-mocha": "^8.0.0", "ts-node": "^10.3.0", "chai": "^4.3.4", Sample Code: expect(wrapper.find(MyListItem)).to.have.length(3); Execution Command: ts-mocha tests/**/*.tsx -r u ...

What is the best way to retrieve all values stored within a string enum?

Looking to retrieve all values from a string enum. For example, in the following enum, I want to extract ["Red", "Yellow"]: export enum FruitColors { Apple = "Red", Banana = "Yellow", } ...