Issue with Cypress: The 'each' property is missing on type 'TestFunction'

We recently implemented cypress 9.3.1 into our project for end-to-end testing. However, we are encountering an issue where our existing jest tests are not compiling in the CI pipeline.

All parameterized tests are showing the following error:

Property 'each' does not exist on type 'TestFunction'.
       it.each<TestCase>([

Question: How can this be resolved?

Attempts that have been made but did not resolve the issue:

  • Adding 

    import { it } from '@jest/globals'
    to each test file. A similar problem (Property 'toBeTruthy' does not exist on type 'Assertion') was fixed by adding 
    import { expect } from '@jest/globals'
    to each test. Reference:

  • Implementing a project-wide exclusion for cypress globals by including 

    "exclude": ["cypress/global.d.ts"]
    in the tsconfig.spec.json file

typescriptjestjsdependenciescypress

Answer №1

Recently encountered the same issue and discovered that a conflicting type definition from mocha was mistakenly added to our tsconfig.json. Ensure you are not loading Mocha's type definitions.

Update: To resolve it, we had to create a separate tsconfig.json specifically for our cypress tests, following the steps outlined here: https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfig-json

Answer №2

We followed the instructions in the tsconfig.json file outlined here (refer to @JRJurman's answer), but unfortunately, it didn't work for our specific project.

As a solution, we have integrated the cypress-each plugin developed by one of the contributors to Cypress.

npm i -D cypress-each

Here is how you can use it:

import 'cypress-each'

// Create individual tests for each selector
const selectors = ['header', 'footer', '.new-todo']
it.each(selectors)('element %s is visible', (selector) => {
  cy.visit('/')
  cy.get(selector).should('be.visible')
})

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

Can the values of an enum in TypeScript be altered dynamically?

Can the values of an enum be dynamically changed? I currently have an enum set up like this enum MyEnum{ Error = "Error", Warn = "Warnings" } I have realized that in order for the values like Error and Warnings to be translated int ...

javascriptreactjstypescriptreact-i18next

How can you initialize a JavaScript class that has a member variable of its own class?

I've come across an interesting puzzle. I am creating a class that can dynamically replicate itself to different levels, similar to an expandable menu. The initial definition looks like this: class MyClass { name: string = ''; fields ...

javascripttypescriptclassrecursion

What is the process for expanding declared variables in lib.d.ts?

Recently, I came across a Javascript library called History.js History.js acts as a wrapper for the history object in Javascript, allowing for seamless cross-platform functionality. While using it in a standard Javascript environment is straightforward, ...

typescript

Tips for accessing HttpParams within a WebApi Controller while utilizing the [HttpPut] method

I am attempting to update a specific resource by accessing it through the PUT method in an Angular service. RollBackBatchById(selectedBatchId: number) { const params = new HttpParams(); params.append('resourceId', resourceId.toString()); ...

c#angulartypescriptasp.net-core

Combining Vue with Typescript and rollup for a powerful development stack

Currently, I am in the process of bundling a Vue component library using TypeScript and vue-property-decorator. The library consists of multiple Vue components and a plugin class imported from a separate file: import FormularioForm from '@/FormularioF ...

typescriptvue.jsrollupjsvue-property-decorator

Google Places Autocomplete failing during Cypress test

I've been experimenting with Cypress as a testing tool for an Angular website I'm currently working on. One of the tests is related to a location search feature that utilizes Google Places service for autocomplete functionality. When everything i ...

angulargoogle-placescypress

Challenge with React CloneElement regarding typing

Utilizing React Children and React Clone element, I aim to trigger methods in both the wrapper and Select components upon onClick event in the Option component. Although everything is functioning correctly, I am encountering a type error when calling the O ...

reactjstypescript

The property is not found in the '{}' type but is necessary in the type... Typescript connect strategy

Hello, I am currently trying to establish a connection pattern for React with TypeScript. I have a reducer set up as follows: type State = { version: number, a?: string } interface ActionC { type: string payload?: number } type IAction = Action ...

reactjstypescriptredux

VS Code sees JavaScript files as if they were Typescript

I have recently delved into the world of Typescript and have been using it for a few days now. Everything seems to be working smoothly - Emmet, linting, etc. However, I've encountered an issue when trying to open my older JavaScript projects in VS Cod ...

javascripttypescriptvue.jsnuxt.jsvetur

Angular 2's JSON tube is malfunctioning

Each time I attempt to utilize the JSON pipe to pass my data, an error message appears in the console: Unhandled Promise rejection: Template parse errors: The pipe 'json' could not be found (... Can someone help me understand what mistake I am ...

jsonangulartypescript

The Typescript error message states: "Unable to access 'add' property of null"

I am trying to implement a role command in discord.js v13.6, but I am facing an issue where it cannot read the line related to adding a role. The error message displayed is Typescript: Cannot read properties of null (reading "add"). How can I resolve thi ...

javascriptnode.jstypescriptdiscord.js

Declare a variable that can be accessed by all components

I am working on creating variables that can be accessed across all components within my Angular application. By creating a service that facilitates user connection, I aim to capture user information during the login process and store them in variables tha ...

angulartypescriptfirebasefirebase-realtime-databasecomponents

Testing Angular NavigationEnd with Jest

Below is the code of my component that I want to test: allpages: Array<Page> = [ { name: 'Home', url: '/home' }, ]; constructor(private router: Router) { this.$routerEvent = this.router.events.subscribe((event: Event) => ...

angularjestjsangular-routerts-jest

How can I capture the click event on the oktext in Ionic?

When using Ionic, I have a select button with options for okText and cancelText. The issue I am facing is that when I click on okText, the menu closes as expected due to this attribute. However, I am interested in implementing it through click events. Belo ...

angulartypescriptionic-frameworkionic3

Testing NextJS App Router API routes with Jest: A comprehensive guide

Looking to test a basic API route: File ./src/app/api/name import { NextResponse } from 'next/server'; export async function GET() { const name = process.env.NAME; return NextResponse.json({ name, }); } Attempting to test ...

reactjstypescriptnext.jsjestjsts-jest

I obtained the binary tree output in the form of an object. How can I extract the values from this object and store them in an array to continue working on

Issue Statement In this scenario, you have been presented with a tree consisting of N nodes that are rooted at 1. Each node in the tree is associated with a special number, Se. Moreover, each node possesses a certain Power, which is determined by the count ...

javascriptalgorithmtypescripttreebinary-tree

Using ReactJS with Typescript and react rewired to load CSS module

I am currently setting up a proof of concept project using ReactJS and typescript, and I want to incorporate CSS modules without ejecting the webpack configuration. Here are the steps I have taken so far: Installed create-react-app globally - npm install ...

cssreactjstypescriptwebpackreact-css-modules

Vue HeadlessUI Error: The function vue.defineComponent is not recognized

Trying to incorporate @headlessui/vue into my nuxt project has been a challenge. My attempt at using it looks like this: <template> <Menu> <MenuItems> <MenuItem>Item</MenuItem> </MenuItems> </Menu&g ...

typescriptvue.jsvuejs2nuxt.jstailwind-css

Arrange Angular code in WebStorm by placing decorated variables after non-decorated ones

I am currently working on configuring arrangement rules for organizing class local variables before input variables. I want to structure them like this: private x; public y; @Input private z; @Input public q; However, despite my efforts, I have been unab ...

typescriptwebstorm

Inject props into a Component nested within a Higher-Order-Component (HOC)

In attempting to grasp the concept of creating a React Higher Order Component from this particular article, I find myself struggling to fully understand and utilize this HOC. interface PopupOnHoverPropType { hoverDisplay: string; } const WithPopupOnHov ...

javascriptreactjstypescripthigher-order-functionshigher-order-components