Cypress causes compile error: Property 'each' does not exist on type 'TestFunction'

[ChristianSchwarz]

We have introduced cypress 9.3.1 in our project for e2e tests. Now we face the problem that our existing jest test don't compile in the CI.

The following error occures for all parameterized tests:

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

Question: How to fix it?

---

What we tried and did't work:

• Adding import { it } from '@jest/globals' to every test. We where able to fix a similar problem (Property 'toBeTruthy' does not exist on type 'Assertion') by adding import { expect } from '@jest/globals' to every test. See: https://stackoverflow.com/a/65153905

• Adding a project wide exclusion for cypress globals, by adding "exclude": ["cypress/global.d.ts"] to the tsconfig.spec.json

[jonguenther]

Bump, this would greatly help increasing DX & reduce repetitive code when trying to test slightly changing cases like

const testCases = [
  ['Stories', '/posts'],
  ['Categories', '/categories'],
  ['Products', '/products'],
];

describe('Menu Navigation', () => {
  // If we could use Jest as usual, we should be able to do this
  it.each(testCases)(
    'It should click %s in menu and go to %s',
    (menuTitle, menuURL) => {
      cy.visit('http://localhost:3000/');
      cy.get('.mantine-Burger-root').click();
      cy.get('p > a > div').contains(menuTitle).click();
      cy.url().should('include', menuURL);
    },
  );

  // but for now we have to do everything manually
  it('Goes to Stories', () => {
    cy.visit('http://localhost:3000/');
    cy.get('.mantine-Burger-root').click();
    cy.get('p > a > div').contains('Stories').click();
    cy.url().should('include', '/posts');
  });
  it('Goes to Categories', () => {
    cy.visit('http://localhost:3000/');
    cy.get('.mantine-Burger-root').click();
    cy.get('p > a > div').contains('Categories').click();
    cy.url().should('include', '/categories');
  });
  it('Goes to Products', () => {
    cy.visit('http://localhost:3000/');
    cy.get('.mantine-Burger-root').click();
    cy.get('p > a > div').contains('Products').click();
    cy.url().should('include', '/products');
  });
});

I tried using jest-each, but there I get Cannot read properties of undefined (reading 'skip') as error.

As content, I am using Next.js on version 12.0.7 and it.each works without issues in normal unit tests (I guess this is due to different name spaces?).

[jjhelguero]

You can use that with the cypress-each plugin.